<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>树结构 Tree | BIN-UI-DESIGN</title>
    <meta name="description" content="A Compontnts Lib for Vue3">
    <link rel="preload stylesheet" href="/bin-ui-design/assets/style.c1bcbbc4.css" as="style">
    
    <script type="module" src="/bin-ui-design/assets/app.e7678c4e.js"></script>
    <link rel="preload" href="/bin-ui-design/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/framework.ef1b8cce.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/theme.feefc56e.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/preset.a505c3e9.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/chunks/dayjs.min.04d70162.js">
    <link rel="modulepreload" href="/bin-ui-design/assets/components_tree.md.d80b44bd.lean.js">
    <link rel="icon" href="/bin-ui-design/favicon.ico">
    <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body><div class="bin-popover bin-popper is-light" style="width:200px;z-index:2233;display:none;" id="bin-popper-8485" role="tooltip"><!--v-if--><!--[--><p><i class="b-iconfont b-icon-question-circle" style="color:var(--bin-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="bin-button bin-button--mini bin-button--text" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消<!--]--></span></button><button class="bin-button bin-button--primary bin-button--mini" type="button"><!----><span class="bin-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="bin-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2234;display:none;" id="bin-popper-5793" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2235;display:none;" id="bin-popper-4722" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2236;display:none;" id="bin-popper-1220" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2237;display:none;" id="bin-popper-6546" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2238;display:none;" id="bin-popper-5333" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2239;display:none;" id="bin-popper-4066" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2240;display:none;" id="bin-popper-6518" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2241;display:none;" id="bin-popper-4206" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2242;display:none;" id="bin-popper-7162" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2243;display:none;" id="bin-popper-7600" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2244;display:none;" id="bin-popper-651" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2245;display:none;" id="bin-popper-6249" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2246;display:none;" id="bin-popper-7499" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2247;display:none;" id="bin-popper-9867" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2248;display:none;" id="bin-popper-3541" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2249;display:none;" id="bin-popper-2503" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2250;display:none;" id="bin-popper-7331" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2251;display:none;" id="bin-popper-9599" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2252;display:none;" id="bin-popper-2689" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-dropdown__popper bin-popper is-light is-pure" style="z-index:2253;display:none;" id="bin-popper-5130" role="tooltip"><!--[--><!--[--><ul class="bin-dropdown-menu"><!--[--><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-edit-square"></i>编辑<!--]--></li><li class="bin-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="b-iconfont b-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div class="bin-tree-select__popper undefined bin-popper is-light is-pure" style="z-index:2254;display:none;" id="bin-popper-3286" role="tooltip"><!--[--><div class="bin-scrollbar"><div class="bin-tree-select-panel__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><div class="bin-scrollbar__view" style=""><!--[--><div class="bin-tree-select-inner" style="min-width:;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="7"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="8"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-tree-select__popper undefined bin-popper is-light is-pure" style="z-index:2255;display:none;" id="bin-popper-430" role="tooltip"><!--[--><div class="bin-scrollbar"><div class="bin-tree-select-panel__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><div class="bin-scrollbar__view" style=""><!--[--><div class="bin-tree-select-inner" style="min-width:;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="7"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="8"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div class="bin-tree-select__popper undefined bin-popper is-light is-pure" style="z-index:2256;display:none;" id="bin-popper-8127" role="tooltip"><!--[--><div class="bin-scrollbar"><div class="bin-tree-select-panel__wrap bin-scrollbar__wrap bin-scrollbar__wrap--hidden-default" style=""><div class="bin-scrollbar__view" style=""><!--[--><div class="bin-tree-select-inner" style="min-width:;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="7"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="8"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="bin-scrollbar__bar is-horizontal" style=""><div class="bin-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="bin-scrollbar__bar is-vertical" style=""><div class="bin-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor-->
    <div id="app"><div class="Layout" data-v-10b21a41><!--[--><!--]--><!--[--><span tabindex="-1" data-v-adaaf041></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-adaaf041> Skip to content </a><!--]--><!----><header class="VPNav" data-v-10b21a41 data-v-53d5d812><div class="VPNavBar has-sidebar" data-v-53d5d812 data-v-9b495835><div class="container" data-v-9b495835><div class="title" data-v-9b495835><div class="VPNavBarTitle has-sidebar" data-v-9b495835 data-v-e8b3dcd3><a class="title" href="/bin-ui-design/" data-v-e8b3dcd3><!--[--><!--]--><!--[--><img class="VPImage logo" src="/bin-ui-design/logo.svg" alt data-v-8268b5c7><!--]--><!--[-->BIN-UI-DESIGN<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-9b495835><div class="curtain" data-v-9b495835></div><div class="content-body" data-v-9b495835><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-9b495835><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9b495835 data-v-65dcea68><span id="main-nav-aria-label" class="visually-hidden" data-v-65dcea68>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/bin-ui-design/docs/introduction.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/bin-ui-design/components/button.html" tabindex="0" data-v-65dcea68 data-v-d94ce39d><!--[--><span data-v-d94ce39d>组件</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-65dcea68 data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-8d848982><span class="text" data-v-8d848982><!----><span data-v-8d848982>生态系统</span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-8d848982><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><div class="items" data-v-a89d4855><!--[--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->资源<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-admin-pro/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-admin-pro<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-datav-schema/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-datav-schema<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v3<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-editor-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-editor-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts-next/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts-next<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->官方库v2<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ui/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ui<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-ace-editor/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-ace-editor<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-charts/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-charts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-tree-org/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-tree-org<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><span class="VPLink" data-v-6cb95b35><!--[-->动画库<!--]--></span></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-animation<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-a89d4855 data-v-6cb95b35><a class="VPLink link vp-external-link-icon" href="https://wangbin3162.github.io/bin-keyframe-animation/" target="_blank" rel="noreferrer" data-v-6cb95b35><!--[-->bin-keyframe-animation<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9b495835 data-v-6e555ce1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-6e555ce1 data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9b495835 data-v-e0d4c2fb data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9b495835 data-v-3ec7766a data-v-8d848982><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8d848982><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-8d848982><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-8d848982><div class="VPMenu" data-v-8d848982 data-v-a89d4855><!----><!--[--><!--[--><!----><div class="group" data-v-3ec7766a><div class="item appearance" data-v-3ec7766a><p class="label" data-v-3ec7766a>Appearance</p><div class="appearance-action" data-v-3ec7766a><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-3ec7766a data-v-843b33e0 data-v-1a25bfd8><span class="check" data-v-1a25bfd8><span class="icon" data-v-1a25bfd8><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-843b33e0><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-843b33e0><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-3ec7766a><div class="item social-links" data-v-3ec7766a><div class="VPSocialLinks social-links-list" data-v-3ec7766a data-v-54ca10e8><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wangbin3162/bin-ui-design" aria-label="github" target="_blank" rel="noopener" data-v-54ca10e8 data-v-f031c1b5><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9b495835 data-v-0a67234a><span class="container" data-v-0a67234a><span class="top" data-v-0a67234a></span><span class="middle" data-v-0a67234a></span><span class="bottom" data-v-0a67234a></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-10b21a41 data-v-eddb4634><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-eddb4634><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-eddb4634><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-eddb4634>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-eddb4634 data-v-b2855fa6><button data-v-b2855fa6>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-10b21a41 data-v-2abe540d><div class="curtain" data-v-2abe540d></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2abe540d><span class="visually-hidden" id="sidebar-aria-label" data-v-2abe540d> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>通用组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/icon.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-fire"></i>图标<span>Icon</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/button.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-Youtube"></i>按钮<span>Button</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/card.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-creditcard"></i>卡片<span>Card</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/collapse.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-interation"></i>折叠面板<span>Collapse</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/divider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-line"></i>分割线<span>Divider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/dropdown.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-down"></i>下拉菜单<span>Dropdown</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tag.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-tags"></i>标签<span>Tag</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/image.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-image"></i>图片<span>Image</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>布局组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/layout.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-layout"></i>布局组件<span>Layout</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/grid.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore"></i>栅格<span>Grid</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/space.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-swap"></i>间距<span>Space</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/split.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-block"></i>分割面板<span>Split</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据录入组件 (14)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-edit-square"></i>输入框<span>Input</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/input-number.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-shake"></i>数字输入<span>InputNumber</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/radio.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-plus-circle"></i>单选框<span>Radio</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/checkbox.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-check-square"></i>多选框<span>Checkbox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/switch.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>开关<span>Switch</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/select.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>选择器<span>Select</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/cascader.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-left"></i>级联选择<span>Cascader</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/date-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar"></i>日期选择器<span>DatePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/time-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-time-circle"></i>时间选择器<span>TimePicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/color-picker.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-bg-colors"></i>颜色选择器<span>ColorPicker</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/rate.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-star"></i>评分<span>Rate</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/slider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>滑块<span>Slider</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/upload.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-cloud-upload"></i>上传<span>Upload</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/form.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-reconciliation"></i>表单<span>Form</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0 has-active" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>数据展示组件 (9)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tree.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-branches"></i>树结构<span>Tree</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/table.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-table"></i>表格<span>Table</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/page.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-read"></i>分页<span>Page</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/desc.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-unorderedlist"></i>描述<span>Desc</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/timeline.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowdown"></i>时间线<span>Timeline</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/calendar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-calendar-fill"></i>日历<span>Calendar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/carousel.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-appstore-fill"></i>轮播<span>Carousel</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/count-to.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-orderedlist"></i>数字动画<span>CountTo</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/trend.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-caret-up"></i>趋势标记<span>Trend</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>导航组件 (8)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/affix.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pushpin"></i>图钉<span>Affix</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/anchor.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-attachment"></i>锚点<span>Anchor</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/back-top.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-up"></i>返回顶部<span>BackTop</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/breadcrumb.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-right"></i>面包屑<span>Breadcrumb</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading-bar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-minus"></i>加载条<span>Loading Bar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/menu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>菜单<span>Menu</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tabs.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-project"></i>标签页<span>Tabs</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/steps.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-arrowright"></i>步骤<span>Steps</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>反馈组件 (13)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/alert.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-error-fill"></i>警告信息<span>Alert</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/badge.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>标记<span>Badge</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/modal.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-idcard"></i>模态框<span>Modal</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-message"></i>消息提示<span>Message</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/message-box.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-mail"></i>弹框提示<span>MessageBox</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/notice.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-notification"></i>通知<span>Notice</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/tooltip.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-info-circle"></i>弹出提示<span>Tooltip</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popover.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-question-circle"></i>弹出信息<span>Popover</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/drawer.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-build"></i>抽屉<span>Drawer</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/skeleton.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-sever-fill"></i>骨架屏<span>Skeleton</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/loading.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-loading"></i>加载<span>Loading</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/progress.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-hourglass"></i>进度条<span>Progress</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/circle.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-redo"></i>进度环<span>Circle</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>内置组件 (4)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/empty.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-border"></i>空状态<span>Empty</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/scrollbar.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-container"></i>滚动组件<span>Scrollbar</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/popper.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-pic-center"></i>弹层<span>Popper</span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/contextmenu.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-menu"></i>右键菜单<span>Contextmenu</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2abe540d><section class="VPSidebarItem level-0" data-v-2abe540d data-v-e0a666f9><div class="item" role="button" tabindex="0" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><h2 class="text" data-v-e0a666f9>配置组件 (1)</h2><!----></div><div class="items" data-v-e0a666f9><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e0a666f9 data-v-e0a666f9><div class="item" data-v-e0a666f9><div class="indicator" data-v-e0a666f9></div><a class="VPLink link link" href="/bin-ui-design/components/config-provider.html" data-v-e0a666f9><!--[--><p class="text" data-v-e0a666f9><i class="b-iconfont b-icon-setting"></i>全局配置<span>ConfigProvider</span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-10b21a41 data-v-4d31e3f3><div class="VPDoc has-sidebar has-aside" data-v-4d31e3f3 data-v-9f9999b2><!--[--><!--]--><div class="container" data-v-9f9999b2><div class="aside" data-v-9f9999b2><div class="aside-curtain" data-v-9f9999b2></div><div class="aside-container" data-v-9f9999b2><div class="aside-content" data-v-9f9999b2><div class="VPDocAside" data-v-9f9999b2 data-v-1658cfd8><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-1658cfd8 data-v-667990eb><div class="content" data-v-667990eb><div class="outline-marker" data-v-667990eb></div><div class="outline-title" data-v-667990eb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-667990eb><span class="visually-hidden" id="doc-outline-aria-label" data-v-667990eb> Table of Contents for current page </span><ul class="root" data-v-667990eb data-v-d7e7591d><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-1658cfd8></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-9f9999b2><div class="content-container" data-v-9f9999b2><!--[--><!--]--><!----><main class="main" data-v-9f9999b2><div style="position:relative;" class="vp-doc _bin-ui-design_components_tree" data-v-9f9999b2><div><!----><h1 id="树结构-tree" tabindex="-1">树结构 Tree <a class="header-anchor" href="#树结构-tree" aria-label="Permalink to &quot;树结构 Tree&quot;">​</a></h1><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p><code>lockSelect</code> 设置可以锁定树的选中事件，这个可以用来控制树菜单在不同情况下的操作</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Basic.vue" relativepath="./demo/Tree/Basic.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div style="width:300px;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-1-1 我是超长字段我是超长字段我是超长字段"><!----> 三级 1-1-1 我是超长字段我是超长字段我是超长字段</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><div style="width:80px;"><!--[--><span tabindex="0" class="bin-switch bin-switch-large" style="" ariadescribedby="bin-popper-8485"><input type="hidden" value="false"><span class="bin-switch-inner"><!----><!--[-->解锁<!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:lock-select</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;lockSelect&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">title-ellipsis</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@select-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 80px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-switch</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;lockSelect&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;large&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">open</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">锁定</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">#</span><span style="color: #C4A7E7; font-style: italic">close</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">解锁</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-switch</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-1 我是超长字段我是超长字段我是超长字段&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">lockSelect</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">false</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSelect</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:lock-select</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;lockSelect&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">title-ellipsis</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@select-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 80px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-switch</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;lockSelect&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;large&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">open</span><span style="color: #002339">&gt;锁定&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">template</span><span style="color: #002339"> #</span><span style="color: #DF8618; font-style: italic">close</span><span style="color: #002339">&gt;解锁&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-switch</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { title: </span><span style="color: #A44185">&#39;三级 1-1-1 我是超长字段我是超长字段我是超长字段&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { title: </span><span style="color: #A44185">&#39;三级 1-1-2&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-2-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-2-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">lockSelect</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">false</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSelect</span><span style="color: #002339">(</span><span style="color: #B1108E">selected</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">selected</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="额外参数配置" tabindex="-1">额外参数配置 <a class="header-anchor" href="#额外参数配置" aria-label="Permalink to &quot;额外参数配置&quot;">​</a></h2><p>可以配置额外参数设置，比如附加 id，code 等业务参数，也可以指定 title 显示的字段名称，默认为<code>title</code></p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Param.vue" relativepath="./demo/Tree/Param.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->初始化数据并默认选中前端组<!--]--></span></button><div flex class="mt-10"><div style="width:300px;"><div class="bin-tree" role="tree"><div><div class="bin-empty bin-empty-normal" style="margin:16px 0;"><div class="bin-empty-image"><!--[--><svg class="bin-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="bin-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="bin-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="bin-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="bin-empty-description"><!--[-->暂无数据<!--]--></p></div></div><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;initData&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">初始化数据并默认选中前端组</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mt-10&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treeRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">title-key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@select-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSelect&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">nextTick</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">defaultId</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;00102&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">initData</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yfb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00101&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00102&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;qd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00103&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;UI设计&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;sj&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交互、ui设计中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00104&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;cs&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00105&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yw&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维、服务、巡检&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">      ]</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xmb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目服务部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00201&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;开发组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;kf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端项目开发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00202&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付服务组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付项目，技术服务支持&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">      ]</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">nextTick</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">!</span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">return</span></span>
<span class="line"></span>
<span class="line"><span style="color: #908CAA">    </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 获取树结构的拍平数据，查找当前需要选中的节点值</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">flatState</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">getFlatState</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">current</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">flatState</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">find</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">defaultId</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">current</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">current</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">setSelected</span><span style="color: #E0DEF4">([</span><span style="color: #E0DEF4; font-style: italic">current</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeKey</span><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSelect</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;initData&quot;</span><span style="color: #002339">&gt;初始化数据并默认选中前端组&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mt-10&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treeRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">title-key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@select-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSelect&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">nextTick</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">defaultId</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;00102&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">initData</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">    {</span></span>
<span class="line"><span style="color: #002339">      id: </span><span style="color: #A44185">&#39;001&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      text: </span><span style="color: #A44185">&#39;研发部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      deptCode: </span><span style="color: #A44185">&#39;yfb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      desc: </span><span style="color: #A44185">&#39;研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      children: [</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00101&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;后端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;hd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;后端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00102&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;前端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;qd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;前端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00103&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;UI设计&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;sj&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;交互、ui设计中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00104&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;cs&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00105&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;运维组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;yw&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;运维、服务、巡检&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">        }</span></span>
<span class="line"><span style="color: #002339">      ]</span></span>
<span class="line"><span style="color: #002339">    },</span></span>
<span class="line"><span style="color: #002339">    {</span></span>
<span class="line"><span style="color: #002339">      id: </span><span style="color: #A44185">&#39;002&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      text: </span><span style="color: #A44185">&#39;项目部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      deptCode: </span><span style="color: #A44185">&#39;xmb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      desc: </span><span style="color: #A44185">&#39;项目服务部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      children: [</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00201&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;开发组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;kf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;后端项目开发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          id: </span><span style="color: #A44185">&#39;00202&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          text: </span><span style="color: #A44185">&#39;交付服务组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          deptCode: </span><span style="color: #A44185">&#39;jf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          desc: </span><span style="color: #A44185">&#39;交付项目，技术服务支持&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">        }</span></span>
<span class="line"><span style="color: #002339">      ]</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  ]</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">nextTick</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #7B30D0">!</span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">) </span><span style="color: #7B30D0">return</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #357B42; font-style: italic">// 获取树结构的拍平数据，查找当前需要选中的节点值</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">flatState</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">getFlatState</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">current</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">flatState</span><span style="color: #002339">.</span><span style="color: #7EB233">find</span><span style="color: #002339">(</span><span style="color: #B1108E">node</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">id</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #2F86D2">defaultId</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">current</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">current</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">setSelected</span><span style="color: #002339">([</span><span style="color: #2F86D2">current</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeKey</span><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSelect</span><span style="color: #002339">(</span><span style="color: #B1108E">selected</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">selected</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="其他属性" tabindex="-1">其他属性 <a class="header-anchor" href="#其他属性" aria-label="Permalink to &quot;其他属性&quot;">​</a></h2><p>可以设置 show-checkbox 开启勾选，并可以设置数据格式中的默认选中</p><p>expand、selected、checked 和 disabled 可以设置展开，选中，勾选和禁用。multiple 开启多选</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Other.vue" relativepath="./demo/Tree/Other.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->多选<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-1-1 我是超长字段我是超长字段我是超长字段"><!----> 三级 1-1-1 我是超长字段我是超长字段我是超长字段</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->附加图标<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="导航"><i class="b-iconfont b-icon-apartment"></i> 导航</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="导航菜单"><i class="b-iconfont b-icon-menu"></i> 导航菜单</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="图钉"><i class="b-iconfont b-icon-pushpin"></i> 图钉</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="锚点"><i class="b-iconfont b-icon-attachment"></i> 锚点</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="面包屑"><i class="b-iconfont b-icon-right"></i> 面包屑</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="标签页"><i class="b-iconfont b-icon-project"></i> 标签页</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">多选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">show-checkbox</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">multiple</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@select-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@check-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChecked&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">附加图标</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data1&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-1 我是超长字段我是超长字段我是超长字段&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;导航&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;apartment&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;导航菜单&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;menu&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;图钉&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pushpin&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;锚点&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attachment&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;面包屑&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;right&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;标签页&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;project&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSelect</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">selected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChecked</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">checked</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">checked</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;多选&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">show-checkbox</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">multiple</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@select-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@check-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChecked&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;附加图标&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data1&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { title: </span><span style="color: #A44185">&#39;三级 1-1-1 我是超长字段我是超长字段我是超长字段&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { title: </span><span style="color: #A44185">&#39;三级 1-1-2&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-2-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-2-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;导航&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    icon: </span><span style="color: #A44185">&#39;apartment&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;导航菜单&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;menu&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;图钉&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;pushpin&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;锚点&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;attachment&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;面包屑&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;right&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;标签页&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;project&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSelect</span><span style="color: #002339">(</span><span style="color: #B1108E">selected</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">selected</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChecked</span><span style="color: #002339">(</span><span style="color: #B1108E">checked</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">checked</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="树节点的操作" tabindex="-1">树节点的操作 <a class="header-anchor" href="#树节点的操作" aria-label="Permalink to &quot;树节点的操作&quot;">​</a></h2><p>树结构默认拍平了所有节点数组，并塞入了唯一的 nodeKey 值用于索引节点，这样可以方便快捷的获取和设置树的状态</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Ctrl.vue" relativepath="./demo/Tree/Ctrl.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="mb-16"><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->展开全部<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->收起全部<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->展开三级<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->选择全部<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->取消全选<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->设置选中1-2及以下<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->单选 1-2-1<!--]--></span></button><button class="bin-button bin-button--default bin-button--small" type="button"><!----><span class="bin-button__content" style=""><!--[-->清空单选和多选<!--]--></span></button></div><div style="width:300px;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-1-1"><!----> 三级 1-1-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="7"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="一级 2"><!----> 一级 2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="8"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 2-1"><!----> 二级 2-1</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="9"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="二级 2-2"><!----> 二级 2-2</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;mb-16&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;expandAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">展开全部</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;collapseAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">收起全部</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;setExpand&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">展开三级</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;checkAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">选择全部</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;uncheckAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">取消全选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;setChecked&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">设置选中1-2及以下</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;setSelected&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">单选 1-2-1</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">size</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;small&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;clear&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">清空单选和多选</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treeRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">show-checkbox</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 2-1&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 2-2&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">expandAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">expandAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">collapseAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">collapseAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">checkAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">checkAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">uncheckAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">uncheckAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">setChecked</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 默认是获取了nodeKey索引，如有特殊判断，如id，则可以自行根据flatState.find所有nodeKey值</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">setChecked</span><span style="color: #E0DEF4">([</span><span style="color: #EA9A97">5</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">6</span><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">setSelected</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">setSelected</span><span style="color: #E0DEF4">([</span><span style="color: #EA9A97">5</span><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">clear</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">uncheckAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">unselectAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">setExpand</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">setExpand</span><span style="color: #E0DEF4">([</span><span style="color: #EA9A97">0</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">4</span><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;mb-16&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;expandAll&quot;</span><span style="color: #002339">&gt;展开全部&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;collapseAll&quot;</span><span style="color: #002339">&gt;收起全部&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;setExpand&quot;</span><span style="color: #002339">&gt;展开三级&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;checkAll&quot;</span><span style="color: #002339">&gt;选择全部&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;uncheckAll&quot;</span><span style="color: #002339">&gt;取消全选&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;setChecked&quot;</span><span style="color: #002339">&gt;设置选中1-2及以下&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;setSelected&quot;</span><span style="color: #002339">&gt;单选 1-2-1&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">size</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;small&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;clear&quot;</span><span style="color: #002339">&gt;清空单选和多选&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treeRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">show-checkbox</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-1-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-1-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-2-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-2-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 2-1&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 2-2&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">expandAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">expandAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">collapseAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">collapseAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">checkAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">checkAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">uncheckAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">uncheckAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">setChecked</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// 默认是获取了nodeKey索引，如有特殊判断，如id，则可以自行根据flatState.find所有nodeKey值</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">setChecked</span><span style="color: #002339">([</span><span style="color: #174781">5</span><span style="color: #002339">, </span><span style="color: #174781">6</span><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">setSelected</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">setSelected</span><span style="color: #002339">([</span><span style="color: #174781">5</span><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">clear</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">uncheckAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">unselectAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">setExpand</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">setExpand</span><span style="color: #002339">([</span><span style="color: #174781">0</span><span style="color: #002339">, </span><span style="color: #174781">4</span><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="异步加载子节点" tabindex="-1">异步加载子节点 <a class="header-anchor" href="#异步加载子节点" aria-label="Permalink to &quot;异步加载子节点&quot;">​</a></h2><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Load.vue" relativepath="./demo/Tree/Load.vue"><section class="vitepress-demo-preview-preview"><!--[--><div style="width:300px;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="root"><!----> root</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><label class="bin-checkbox"><span class="bin-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="bin-checkbox__inner"></span><input class="bin-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="bin-tree-title is-ellipsis has-checkbox" title="leaf"><!----> leaf</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">show-checkbox</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:load-data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;loadData&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;root&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;leaf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    isLeaf</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">loadData</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">item</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">callback</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">item</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #EA9A97">setTimeout</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;have-child&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        loading</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;no-child&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        loading</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #908CAA">    </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 模拟请求数据有子项的时候</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">item</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;have-child&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;child1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          loading</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          isLeaf</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          visible</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;leaf node&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          isLeaf</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">      ]</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">item</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;no-child&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">      </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 按需自行设置是否是叶子节点或者不设置</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">item</span><span style="color: #E0DEF4">[</span><span style="color: #F6C177">&#39;isLeaf&#39;</span><span style="color: #E0DEF4">] </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span></span>
<span class="line"><span style="color: #908CAA">      </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 不设置会保留箭头可以再次点击</span></span>
<span class="line"><span style="color: #908CAA">      </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> data = []</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">callback</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1000</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">show-checkbox</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:load-data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;loadData&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;root&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: []</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;leaf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    isLeaf: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: []</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">loadData</span><span style="color: #002339">(</span><span style="color: #B1108E">item</span><span style="color: #002339">, </span><span style="color: #B1108E">callback</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">item</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7EB233">setTimeout</span><span style="color: #002339">(() </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;have-child&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        loading: </span><span style="color: #174781">false</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: []</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;no-child&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        loading: </span><span style="color: #174781">false</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: []</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #357B42; font-style: italic">// 模拟请求数据有子项的时候</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">item</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;have-child&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          title: </span><span style="color: #A44185">&#39;child1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          loading: </span><span style="color: #174781">false</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          isLeaf: </span><span style="color: #174781">false</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          children: [],</span></span>
<span class="line"><span style="color: #002339">          visible: </span><span style="color: #174781">true</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          title: </span><span style="color: #A44185">&#39;leaf node&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          isLeaf: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">          children: []</span></span>
<span class="line"><span style="color: #002339">        }</span></span>
<span class="line"><span style="color: #002339">      ]</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">item</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;no-child&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #357B42; font-style: italic">// 按需自行设置是否是叶子节点或者不设置</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">item</span><span style="color: #002339">[</span><span style="color: #A44185">&#39;isLeaf&#39;</span><span style="color: #002339">] </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">true</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #357B42; font-style: italic">// 不设置会保留箭头可以再次点击</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #357B42; font-style: italic">// data = []</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">callback</span><span style="color: #002339">(</span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }, </span><span style="color: #174781">1000</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="可以筛选" tabindex="-1">可以筛选 <a class="header-anchor" href="#可以筛选" aria-label="Permalink to &quot;可以筛选&quot;">​</a></h2><p>如果树结构层级较多，可配合过滤函数进行过滤筛选</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Filter.vue" relativepath="./demo/Tree/Filter.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div class="bin-input-wrapper bin-input-type-text bin-input-group-with-append bin-input-with-search" style="width:230px;"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="输入过滤条件后回车筛选" value="" number="false"><!----><span class="bin-input-suffix"><!----><i class="bin-input-icon bin-input-icon-normal bin-input-search-icon b-iconfont b-icon-search"></i><!----><!--[--><!----><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="bin-divider bin-divider-horizontal" style="margin:14px 0;"><!----></div><div style="width:300px;"><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="江苏省"><!----> 江苏省</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="南京市"><!----> 南京市</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="玄武区"><!----> 玄武区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="建邺区"><!----> 建邺区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="秦淮区"><!----> 秦淮区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="6"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="无锡市"><!----> 无锡市</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="7"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="锡山区"><!----> 锡山区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="8"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="惠山区"><!----> 惠山区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="9"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="滨湖区"><!----> 滨湖区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="10"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="梁溪区"><!----> 梁溪区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="11"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="徐州市"><!----> 徐州市</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="12"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="13"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="云龙区"><!----> 云龙区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="14"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="泉山区"><!----> 泉山区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="15"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="铜山区"><!----> 铜山区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="16"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="贾汪区"><!----> 贾汪区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="17"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="沛县"><!----> 沛县</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="18"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="丰县"><!----> 丰县</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="19"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="睢宁县"><!----> 睢宁县</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="20"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="新沂市"><!----> 新沂市</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="21"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="邳州市"><!----> 邳州市</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="22"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="河北省"><!----> 河北省</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="23"><span class="bin-tree-arrow"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="石家庄"><!----> 石家庄</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="24"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="长安区"><!----> 长安区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="25"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="新华区"><!----> 新华区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="26"><span class="bin-tree-arrow"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;query&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">search</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">@search</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 14px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treeRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:filter-node-method</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;filterNode&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">highlight-filter</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;江苏省&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;南京市&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-1-1&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;玄武区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-1-2&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-1-3&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;建邺区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-1-4&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;秦淮区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;无锡市&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-2-1&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;锡山区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-2-2&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;惠山区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-2-3&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;滨湖区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-2-4&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;梁溪区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;徐州市&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-1&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-2&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;云龙区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-3&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;泉山区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-4&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;铜山区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-5&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;贾汪区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-6&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;沛县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-7&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;丰县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-8&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;睢宁县&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-9&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新沂市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1-3-10&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;邳州市&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;河北省&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;石家庄&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2-1-1&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;长安区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2-1-2&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;新华区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;2-1-3&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;鼓楼区&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">query</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">handleFilter</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">filter</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">filterNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">!</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> return node.title===value.trim()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">indexOf</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-input</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;query&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">search</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">@search</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 14px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treeRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:filter-node-method</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;filterNode&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">highlight-filter</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;江苏省&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;1-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;南京市&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-1-1&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;玄武区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-1-2&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-1-3&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;建邺区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-1-4&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;秦淮区&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;1-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;无锡市&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-2-1&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;锡山区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-2-2&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;惠山区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-2-3&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;滨湖区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-2-4&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;梁溪区&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;1-3&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;徐州市&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-1&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-2&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;云龙区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-3&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;泉山区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-4&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;铜山区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-5&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;贾汪区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-6&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;沛县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-7&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;丰县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-8&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;睢宁县&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-9&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;新沂市&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;1-3-10&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;邳州市&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;河北省&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;2-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;石家庄&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;2-1-1&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;长安区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;2-1-2&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;新华区&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          { id: </span><span style="color: #A44185">&#39;2-1-3&#39;</span><span style="color: #002339">, title: </span><span style="color: #A44185">&#39;鼓楼区&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">query</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">handleFilter</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #B1108E">value</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">filter</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">filterNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> (</span><span style="color: #B1108E">value</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #7B30D0">!</span><span style="color: #2F86D2">value</span><span style="color: #002339">) </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">true</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// return node.title===value.trim()</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">.</span><span style="color: #7EB233">indexOf</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">) </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="拖拽排序" tabindex="-1">拖拽排序 <a class="header-anchor" href="#拖拽排序" aria-label="Permalink to &quot;拖拽排序&quot;">​</a></h2><p>开启<code>draggable</code>可以开启树节点的拖拽功能，此时需要监听几个事件来进行数据处理</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Drag.vue" relativepath="./demo/Tree/Drag.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->基础拖拽排序<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="1"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="2"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-1-1"><!----> 三级 1-1-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="3"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="4"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="5"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="6"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="7"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="一级 2"><!----> 一级 2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="8"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 2-1"><!----> 二级 2-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="9"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 2-1-1"><!----> 三级 2-1-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="10"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 2-1-2"><!----> 三级 2-1-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="11"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="二级 2-2"><!----> 二级 2-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="12"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 2-2-1"><!----> 三级 2-2-1</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="13"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="bin-tree-title is-ellipsis" title="三级 2-2-2"><!----> 三级 2-2-2</span><!--]--></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->自定义函数配置<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="数据维度-()"><i class="b-iconfont b-icon-" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>数据维度</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-5793" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="1"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="国家层级-()"><i class="b-iconfont b-icon-cluster" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>国家层级</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-4722" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="2"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="国家-(country)"><i class="b-iconfont b-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>国家</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-1220" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="3"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="省-(province)"><i class="b-iconfont b-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>省</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-6546" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="4"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="市-(city)"><i class="b-iconfont b-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>市</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-5333" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="5"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门-()"><i class="b-iconfont b-icon-folder" style="font-size:16px;margin-right:4px;color:#35495e;"></i>部门</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-4066" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="6"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门编号-(dept_code)"><i class="b-iconfont b-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>部门编号</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-6518" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="7"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门名称-(dept_name)"><i class="b-iconfont b-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>部门名称</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-4206" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="8"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="数据度量-()"><i class="b-iconfont b-icon-" style="font-size:16px;margin-right:4px;color:#1089ff;"></i>数据度量</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-7162" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="9"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="默认-()"><i class="b-iconfont b-icon-folder" style="font-size:16px;margin-right:4px;color:#35495e;"></i>默认</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-7600" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="10"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="统计-(count)"><i class="b-iconfont b-icon-linechart" style="font-size:16px;margin-right:4px;color:#52c41a;"></i>统计</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-651" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="11"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门-()"><i class="b-iconfont b-icon-folder" style="font-size:16px;margin-right:4px;color:#35495e;"></i>部门</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-6249" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="12"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="上级部门-(parent_dept)"><i class="b-iconfont b-icon-linechart" style="font-size:16px;margin-right:4px;color:#52c41a;"></i>上级部门</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-7499" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="true" data-key="13"><span class="bin-tree-arrow bin-tree-arrow-open"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="层级-(level)"><i class="b-iconfont b-icon-linechart" style="font-size:16px;margin-right:4px;color:#52c41a;"></i>层级</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-9867" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">基础拖拽排序</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treeRef&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">default-expand</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@node-drag-start</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragStart&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@node-drag-enter</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragEnter&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@node-drag-leave</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragLeave&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@node-drag-end</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDragEnd&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">@node-drop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleDrop&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">自定义函数配置</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:allow-drop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;allowDrop&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:allow-drag</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;allowDrag&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data1&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">:render</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;renderContent1&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">lock-select</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #C4A7E7; font-style: italic">default-expand</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">h</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">Message</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdown</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdownMenu</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 1-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 1-2-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;一级 2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 2-1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 2-1-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 2-1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;二级 2-2&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 2-2-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;三级 2-2-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;数据维度&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;root&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;国家层级&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hierarchy&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;country&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;国家&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;STRING&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dimension&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;province&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;省&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;STRING&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dimension&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;city&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;市&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;STRING&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dimension&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;部门&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;folder&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dept_code&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;部门编号&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;STRING&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dimension&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dept_name&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;部门名称&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;STRING&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;dimension&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;数据度量&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;root&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;默认&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;folder&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;count&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;统计&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;NUMBER&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;measure&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;部门&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;folder&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;parent_dept&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;上级部门&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;NUMBER&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;measure&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            field</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;level&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;层级&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            dataType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;NUMBER&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            type</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;measure&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            nodeType</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            tableId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">allowDrop</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeType</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">type</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;inner&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeType</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;root&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">allowDrag</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 限制拖拽节点</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">draggingNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeType</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">renderContent1</span><span style="color: #908CAA">({</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">})</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">iconMap</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    root</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hierarchy</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;cluster&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    folder</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;folder&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    dimension</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;deploymentunit&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    measure</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;linechart&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">colorMap</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    root</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#1089ff&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    hierarchy</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#1089ff&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    folder</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#35495e&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    dimension</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#1089ff&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    measure</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#52c41a&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">iconType</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeType</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attribute&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">?</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">type</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeType</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">inline</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;t-ellipsis&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;calc(100% - 24px)&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">}</span><span style="color: #F6C177">-(</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">field</span><span style="color: #F6C177"> </span><span style="color: #3E8FB0">??</span><span style="color: #F6C177"> </span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #908CAA">}</span><span style="color: #F6C177">)`</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`b-icon-</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">iconMap</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">iconType</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">}</span><span style="color: #F6C177">`</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;16px&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> marginRight</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;4px&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> color</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">colorMap</span><span style="color: #E0DEF4">[</span><span style="color: #E0DEF4; font-style: italic">iconType</span><span style="color: #E0DEF4">] </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span></span>
<span class="line"><span style="color: #E0DEF4">      ]</span></span>
<span class="line"><span style="color: #E0DEF4">    )</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">BDropdown</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;click&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        appendToBody</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        placement</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;bottom-start&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">onCommand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">name</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">Message</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">`</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">name</span><span style="color: #908CAA">}</span><span style="color: #F6C177"> node: [</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">}</span><span style="color: #F6C177">]`</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">default</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-icon-setting&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;setting-action&#39;</span><span style="color: #E0DEF4">] </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">dropdown</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownMenu</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;edit&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-iconfont b-icon-edit-square&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #F6C177">&#39;编辑&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">            ])</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;delete&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-iconfont b-icon-delete&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #F6C177">&#39;删除&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">            ])</span></span>
<span class="line"><span style="color: #E0DEF4">          ])</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    )</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;100%&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;12px&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> flex</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;main:justify&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">inline</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragStart</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ev</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;drag start&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragEnter</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ev</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;tree drag enter: &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragLeave</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ev</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;tree drag leave: &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDragEnd</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropType</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ev</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;tree drag end: &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropType</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleDrop</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">draggingNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropNode</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">dropType</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ev</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;tree drop: &#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">dropType</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;基础拖拽排序&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treeRef&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">default-expand</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@node-drag-start</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragStart&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@node-drag-enter</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragEnter&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@node-drag-leave</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragLeave&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@node-drag-end</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDragEnd&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">@node-drop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleDrop&quot;</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;自定义函数配置&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:allow-drop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;allowDrop&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:allow-drag</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;allowDrag&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data1&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">:render</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;renderContent1&quot;</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">draggable</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">lock-select</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #DF8618; font-style: italic">default-expand</span></span>
<span class="line"><span style="color: #002339">      &gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">h</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">Message</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdown</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdownMenu</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-1-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-1-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 1-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 1-2-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 1-2-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;一级 2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 2-1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 2-1-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 2-1-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;二级 2-2&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [{ title: </span><span style="color: #A44185">&#39;三级 2-2-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;三级 2-2-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;数据维度&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    nodeType: </span><span style="color: #A44185">&#39;root&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;国家层级&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        nodeType: </span><span style="color: #A44185">&#39;hierarchy&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;country&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;国家&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;STRING&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;dimension&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #002339">          },</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;province&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;省&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;STRING&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;dimension&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #002339">          },</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;city&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;市&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;STRING&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;dimension&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;部门&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        nodeType: </span><span style="color: #A44185">&#39;folder&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;dept_code&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;部门编号&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;STRING&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;dimension&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #002339">          },</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;dept_name&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;部门名称&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;STRING&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;dimension&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;数据度量&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    nodeType: </span><span style="color: #A44185">&#39;root&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;默认&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        nodeType: </span><span style="color: #A44185">&#39;folder&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;count&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;统计&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;NUMBER&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;measure&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0001&#39;</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">&#39;部门&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        nodeType: </span><span style="color: #A44185">&#39;folder&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        children: [</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;parent_dept&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;上级部门&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;NUMBER&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;measure&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #002339">          },</span></span>
<span class="line"><span style="color: #002339">          {</span></span>
<span class="line"><span style="color: #002339">            field: </span><span style="color: #A44185">&#39;level&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            title: </span><span style="color: #A44185">&#39;层级&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            dataType: </span><span style="color: #A44185">&#39;NUMBER&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            type: </span><span style="color: #A44185">&#39;measure&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            nodeType: </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            tableId: </span><span style="color: #A44185">&#39;0002&#39;</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">allowDrop</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropNode</span><span style="color: #002339">, </span><span style="color: #B1108E">type</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeType</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">type</span><span style="color: #002339"> </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;inner&#39;</span></span>
<span class="line"><span style="color: #002339">  } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeType</span><span style="color: #002339"> </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;root&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">allowDrag</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// 限制拖拽节点</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">draggingNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeType</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;attribute&#39;</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">renderContent1</span><span style="color: #002339">({ </span><span style="color: #B1108E">root</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">data</span><span style="color: #002339"> }) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">iconMap</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    root: </span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hierarchy: </span><span style="color: #A44185">&#39;cluster&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    folder: </span><span style="color: #A44185">&#39;folder&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    dimension: </span><span style="color: #A44185">&#39;deploymentunit&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    measure: </span><span style="color: #A44185">&#39;linechart&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">colorMap</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    root: </span><span style="color: #A44185">&#39;#1089ff&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    hierarchy: </span><span style="color: #A44185">&#39;#1089ff&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    folder: </span><span style="color: #A44185">&#39;#35495e&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    dimension: </span><span style="color: #A44185">&#39;#1089ff&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    measure: </span><span style="color: #A44185">&#39;#52c41a&#39;</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">iconType</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeType</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;attribute&#39;</span><span style="color: #002339"> </span><span style="color: #7B30D0">?</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">type</span><span style="color: #002339"> </span><span style="color: #7B30D0">:</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeType</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">inline</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        class: </span><span style="color: #A44185">&#39;t-ellipsis&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        style: { width: </span><span style="color: #A44185">&#39;calc(100% - 24px)&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">`${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">title</span><span style="color: #A44185">}-(${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">field</span><span style="color: #A44185"> </span><span style="color: #7B30D0">??</span><span style="color: #A44185"> </span><span style="color: #A44185">&#39;&#39;})`</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      [</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, {</span></span>
<span class="line"><span style="color: #002339">          class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">`b-icon-${</span><span style="color: #2F86D2">iconMap</span><span style="color: #A44185">[</span><span style="color: #2F86D2">iconType</span><span style="color: #A44185">]</span><span style="color: #A44185">}`</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">          style: { fontSize: </span><span style="color: #A44185">&#39;16px&#39;</span><span style="color: #002339">, marginRight: </span><span style="color: #A44185">&#39;4px&#39;</span><span style="color: #002339">, color: </span><span style="color: #2F86D2">colorMap</span><span style="color: #002339">[</span><span style="color: #2F86D2">iconType</span><span style="color: #002339">] }</span></span>
<span class="line"><span style="color: #002339">        }),</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span></span>
<span class="line"><span style="color: #002339">      ]</span></span>
<span class="line"><span style="color: #002339">    ),</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">BDropdown</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        trigger: </span><span style="color: #A44185">&#39;click&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        appendToBody: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        placement: </span><span style="color: #A44185">&#39;bottom-start&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">onCommand</span><span style="color: #002339">: </span><span style="color: #B1108E">name</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">name</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">Message</span><span style="color: #002339">(</span><span style="color: #A44185">`${</span><span style="color: #2F86D2">name</span><span style="color: #A44185">} node: [${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">title</span><span style="color: #A44185">}]`</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">        }</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">default</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;b-icon-setting&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;setting-action&#39;</span><span style="color: #002339">] }),</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">dropdown</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownMenu</span><span style="color: #002339">, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339">, { name: </span><span style="color: #A44185">&#39;edit&#39;</span><span style="color: #002339"> }, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: </span><span style="color: #A44185">&#39;b-iconfont b-icon-edit-square&#39;</span><span style="color: #002339"> }),</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #A44185">&#39;编辑&#39;</span></span>
<span class="line"><span style="color: #002339">            ]),</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339">, { name: </span><span style="color: #A44185">&#39;delete&#39;</span><span style="color: #002339"> }, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: </span><span style="color: #A44185">&#39;b-iconfont b-icon-delete&#39;</span><span style="color: #002339"> }),</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #A44185">&#39;删除&#39;</span></span>
<span class="line"><span style="color: #002339">            ])</span></span>
<span class="line"><span style="color: #002339">          ])</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    )</span></span>
<span class="line"><span style="color: #002339">  ]</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">, { style: { width: </span><span style="color: #A44185">&#39;100%&#39;</span><span style="color: #002339">, fontSize: </span><span style="color: #A44185">&#39;12px&#39;</span><span style="color: #002339"> }, flex: </span><span style="color: #A44185">&#39;main:justify&#39;</span><span style="color: #002339"> }, </span><span style="color: #2F86D2">inline</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragStart</span><span style="color: #002339">(</span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">ev</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;drag start&#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragEnter</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropNode</span><span style="color: #002339">, </span><span style="color: #B1108E">ev</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;tree drag enter: &#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragLeave</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropNode</span><span style="color: #002339">, </span><span style="color: #B1108E">ev</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;tree drag leave: &#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDragEnd</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropType</span><span style="color: #002339">, </span><span style="color: #B1108E">ev</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;tree drag end: &#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropType</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleDrop</span><span style="color: #002339">(</span><span style="color: #B1108E">draggingNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropNode</span><span style="color: #002339">, </span><span style="color: #B1108E">dropType</span><span style="color: #002339">, </span><span style="color: #B1108E">ev</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;tree drop: &#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">, </span><span style="color: #2F86D2">dropType</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="render-函数" tabindex="-1">render 函数 <a class="header-anchor" href="#render-函数" aria-label="Permalink to &quot;render 函数&quot;">​</a></h2><p>使用 render 函数可以设置更多自定义的效果</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Render.vue" relativepath="./demo/Tree/Render.vue"><section class="vitepress-demo-preview-preview"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->新增移除<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span>parent 1</span><i class="b-iconfont b-icon-plus-square-fill" style="font-size:16px;color:#1089ff;margin-right:4px;"></i></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span class="t-ellipsis" style="width:calc(100% - 36px);">child 1-1</span><span style="width:36px;"><i class="b-iconfont b-icon-plus-square-fill" style="font-size:16px;color:#5d6d7e;"></i><i class="b-iconfont b-icon-minus-square-fill" style="font-size:16px;color:#f5222d;"></i></span></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span class="t-ellipsis" style="width:calc(100% - 36px);">child 1-2</span><span style="width:36px;"><i class="b-iconfont b-icon-plus-square-fill" style="font-size:16px;color:#5d6d7e;"></i><i class="b-iconfont b-icon-minus-square-fill" style="font-size:16px;color:#f5222d;"></i></span></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="bin-tag is-primary" style="color:;"><!----><!--[-->下拉菜单<!--]--><!----></span><div class="bin-divider bin-divider-horizontal" style="margin:8px 0;"><!----></div><div class="bin-tree" role="tree"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="0"><span class="bin-tree-arrow bin-tree-arrow-open"><i class="b-iconfont b-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="导航"><i class="b-iconfont b-icon-apartment" style="margin-right:4px;"></i>导航</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-3541" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="bin-tree-node-children"><!--[--><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="1"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="导航菜单"><i class="b-iconfont b-icon-menu" style="margin-right:4px;"></i>导航菜单</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-2503" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="2"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="图钉"><i class="b-iconfont b-icon-pushpin" style="margin-right:4px;"></i>图钉</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-7331" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="3"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="锚点"><i class="b-iconfont b-icon-attachment" style="margin-right:4px;"></i>锚点</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-9599" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="4"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="面包屑"><i class="b-iconfont b-icon-right" style="margin-right:4px;"></i>面包屑</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-2689" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="bin-tree-children"><li style=""><div class="bin-tree-node" draggable="false" data-key="5"><span class="bin-tree-arrow"><!----><!----></span><!----><span class="bin-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="标签页"><i class="b-iconfont b-icon-project" style="margin-right:4px;"></i>标签页</span><!--[--><div class="bin-dropdown" aria-describedby="bin-popper-5130" style=""><!--[--><i class="b-iconfont b-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="bin-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="bin-tree__drop-indicator"></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">新增移除</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;tree&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:render</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;renderContent&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;p10&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tag</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">下拉菜单</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-tag</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 8px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data1&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:render</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;renderContent1&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">h</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">Message</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdown</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdownMenu</span><span style="color: #908CAA">,</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;parent 1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">render</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">({</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">})</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            display</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;inline-flex&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            justifyContent</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;space-between&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;100%&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        [</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-icon-plus-square-fill&#39;</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;16px&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> color</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#1089ff&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> marginRight</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;4px&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">onClick</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #EA9A97">append</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">        ]</span></span>
<span class="line"><span style="color: #E0DEF4">      )</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;child 1-1&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;child 1-2&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data1</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;导航&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;apartment&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    expand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;导航菜单&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;menu&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;图钉&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;pushpin&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;锚点&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;attachment&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;面包屑&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;right&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;标签页&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> icon</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;project&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">append</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">||</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">expand</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;new node&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">children</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span><span style="color: #3E8FB0">...</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">remove</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">data</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">parentKey</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">root</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">find</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">el</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">el</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">parent</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">parent</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">root</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">find</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">el</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">el</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">nodeKey</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">===</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">parentKey</span><span style="color: #E0DEF4">)</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">node</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">parent</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">indexOf</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">parent</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">splice</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">renderContent</span><span style="color: #908CAA">({</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">})</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> display</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;inline-flex&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> justifyContent</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;space-between&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;100%&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">    [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;t-ellipsis&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;calc(100% - 36px)&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;36px&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-icon-plus-square-fill&#39;</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;16px&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> color</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#5d6d7e&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">onClick</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">e</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #E0DEF4; font-style: italic">e</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">stopPropagation</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">append</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-icon-minus-square-fill&#39;</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;16px&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> color</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;#f5222d&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">onClick</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">e</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #E0DEF4; font-style: italic">e</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">stopPropagation</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">remove</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">      ])</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  )</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">renderContent1</span><span style="color: #908CAA">({</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">root</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">})</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">inline</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;t-ellipsis&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;calc(100% - 24px)&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">        title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">}</span><span style="color: #F6C177">`</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      [</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`b-icon-</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">icon</span><span style="color: #908CAA">}</span><span style="color: #F6C177">`</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">          style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> marginRight</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;4px&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span></span>
<span class="line"><span style="color: #E0DEF4">      ]</span></span>
<span class="line"><span style="color: #E0DEF4">    )</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">BDropdown</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;click&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        appendToBody</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        placement</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;bottom-start&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">onCommand</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">name</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">name</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">Message</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">`</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">name</span><span style="color: #908CAA">}</span><span style="color: #F6C177"> node: [</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #908CAA">}</span><span style="color: #F6C177">]`</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">default</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;b-iconfont&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-icon-setting&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;setting-action&#39;</span><span style="color: #E0DEF4">] </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #EA9A97">dropdown</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownMenu</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;edit&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-iconfont b-icon-edit-square&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #F6C177">&#39;编辑&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">            ])</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">BDropdownItem</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> name</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;delete&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;i&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> class</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;b-iconfont b-icon-delete&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">              </span><span style="color: #F6C177">&#39;删除&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">            ])</span></span>
<span class="line"><span style="color: #E0DEF4">          ])</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    )</span></span>
<span class="line"><span style="color: #E0DEF4">  ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">h</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;span&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> style</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> width</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;100%&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> fontSize</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;12px&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> flex</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;main:justify&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">},</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">inline</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;新增移除&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;tree&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:render</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;renderContent&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;p10&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tag</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339">&gt;下拉菜单&lt;/</span><span style="color: #0444AC">b-tag</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 8px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-tree</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data1&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:render</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;renderContent1&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339">, </span><span style="color: #2F86D2">h</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">Message</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdown</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdownMenu</span><span style="color: #002339">, </span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;bin-ui-design&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;parent 1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">render</span><span style="color: #002339">: ({ </span><span style="color: #B1108E">root</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">data</span><span style="color: #002339"> }) </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        {</span></span>
<span class="line"><span style="color: #002339">          style: {</span></span>
<span class="line"><span style="color: #002339">            display: </span><span style="color: #A44185">&#39;inline-flex&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            justifyContent: </span><span style="color: #A44185">&#39;space-between&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">            width: </span><span style="color: #A44185">&#39;100%&#39;</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        },</span></span>
<span class="line"><span style="color: #002339">        [</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">),</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, {</span></span>
<span class="line"><span style="color: #002339">            class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;b-icon-plus-square-fill&#39;</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">            style: { fontSize: </span><span style="color: #A44185">&#39;16px&#39;</span><span style="color: #002339">, color: </span><span style="color: #A44185">&#39;#1089ff&#39;</span><span style="color: #002339">, marginRight: </span><span style="color: #A44185">&#39;4px&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">onClick</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #7EB233">append</span><span style="color: #002339">(</span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">            }</span></span>
<span class="line"><span style="color: #002339">          })</span></span>
<span class="line"><span style="color: #002339">        ]</span></span>
<span class="line"><span style="color: #002339">      )</span></span>
<span class="line"><span style="color: #002339">    },</span></span>
<span class="line"><span style="color: #002339">    children: [{ title: </span><span style="color: #A44185">&#39;child 1-1&#39;</span><span style="color: #002339"> }, { title: </span><span style="color: #A44185">&#39;child 1-2&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data1</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">&#39;导航&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    icon: </span><span style="color: #A44185">&#39;apartment&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    expand: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;导航菜单&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;menu&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;图钉&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;pushpin&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;锚点&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;attachment&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;面包屑&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;right&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">      { title: </span><span style="color: #A44185">&#39;标签页&#39;</span><span style="color: #002339">, icon: </span><span style="color: #A44185">&#39;project&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">append</span><span style="color: #002339">(</span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">children</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339"> </span><span style="color: #7B30D0">||</span><span style="color: #002339"> []</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">expand</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">true</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">children</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">({ title: </span><span style="color: #A44185">&#39;new node&#39;</span><span style="color: #002339"> })</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">children</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span><span style="color: #7B30D0">...</span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">remove</span><span style="color: #002339">(</span><span style="color: #B1108E">root</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">data</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">root</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">parentKey</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">root</span><span style="color: #002339">.</span><span style="color: #7EB233">find</span><span style="color: #002339">(</span><span style="color: #B1108E">el</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">el</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">).</span><span style="color: #2F86D2">parent</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">parent</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">root</span><span style="color: #002339">.</span><span style="color: #7EB233">find</span><span style="color: #002339">(</span><span style="color: #B1108E">el</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">el</span><span style="color: #002339">.</span><span style="color: #2F86D2">nodeKey</span><span style="color: #002339"> </span><span style="color: #7B30D0">===</span><span style="color: #002339"> </span><span style="color: #2F86D2">parentKey</span><span style="color: #002339">).</span><span style="color: #2F86D2">node</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">parent</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339">.</span><span style="color: #7EB233">indexOf</span><span style="color: #002339">(</span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">parent</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339">.</span><span style="color: #7EB233">splice</span><span style="color: #002339">(</span><span style="color: #2F86D2">index</span><span style="color: #002339">, </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">renderContent</span><span style="color: #002339">({ </span><span style="color: #B1108E">root</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">data</span><span style="color: #002339"> }) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    {</span></span>
<span class="line"><span style="color: #002339">      style: { display: </span><span style="color: #A44185">&#39;inline-flex&#39;</span><span style="color: #002339">, justifyContent: </span><span style="color: #A44185">&#39;space-between&#39;</span><span style="color: #002339">, width: </span><span style="color: #A44185">&#39;100%&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">    },</span></span>
<span class="line"><span style="color: #002339">    [</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">, { class: </span><span style="color: #A44185">&#39;t-ellipsis&#39;</span><span style="color: #002339">, style: { width: </span><span style="color: #A44185">&#39;calc(100% - 36px)&#39;</span><span style="color: #002339"> } }, </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">),</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">, { style: { width: </span><span style="color: #A44185">&#39;36px&#39;</span><span style="color: #002339"> } }, [</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, {</span></span>
<span class="line"><span style="color: #002339">          class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;b-icon-plus-square-fill&#39;</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">          style: { fontSize: </span><span style="color: #A44185">&#39;16px&#39;</span><span style="color: #002339">, color: </span><span style="color: #A44185">&#39;#5d6d7e&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">onClick</span><span style="color: #002339">: </span><span style="color: #B1108E">e</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #2F86D2">e</span><span style="color: #002339">.</span><span style="color: #7EB233">stopPropagation</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">append</span><span style="color: #002339">(</span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        }),</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, {</span></span>
<span class="line"><span style="color: #002339">          class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;b-icon-minus-square-fill&#39;</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">          style: { fontSize: </span><span style="color: #A44185">&#39;16px&#39;</span><span style="color: #002339">, color: </span><span style="color: #A44185">&#39;#f5222d&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">onClick</span><span style="color: #002339">: </span><span style="color: #B1108E">e</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #2F86D2">e</span><span style="color: #002339">.</span><span style="color: #7EB233">stopPropagation</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">remove</span><span style="color: #002339">(</span><span style="color: #2F86D2">root</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">          }</span></span>
<span class="line"><span style="color: #002339">        })</span></span>
<span class="line"><span style="color: #002339">      ])</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  )</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">renderContent1</span><span style="color: #002339">({ </span><span style="color: #B1108E">root</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">, </span><span style="color: #B1108E">data</span><span style="color: #002339"> }) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">inline</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        class: </span><span style="color: #A44185">&#39;t-ellipsis&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        style: { width: </span><span style="color: #A44185">&#39;calc(100% - 24px)&#39;</span><span style="color: #002339"> },</span></span>
<span class="line"><span style="color: #002339">        title: </span><span style="color: #A44185">`${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">title</span><span style="color: #A44185">}`</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      [</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, {</span></span>
<span class="line"><span style="color: #002339">          class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">`b-icon-${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">icon</span><span style="color: #A44185">}`</span><span style="color: #002339">],</span></span>
<span class="line"><span style="color: #002339">          style: { marginRight: </span><span style="color: #A44185">&#39;4px&#39;</span><span style="color: #002339"> }</span></span>
<span class="line"><span style="color: #002339">        }),</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span></span>
<span class="line"><span style="color: #002339">      ]</span></span>
<span class="line"><span style="color: #002339">    ),</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">BDropdown</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        trigger: </span><span style="color: #A44185">&#39;click&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        appendToBody: </span><span style="color: #174781">true</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        placement: </span><span style="color: #A44185">&#39;bottom-start&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">onCommand</span><span style="color: #002339">: </span><span style="color: #B1108E">name</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">name</span><span style="color: #002339">, </span><span style="color: #2F86D2">data</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">Message</span><span style="color: #002339">(</span><span style="color: #A44185">`${</span><span style="color: #2F86D2">name</span><span style="color: #A44185">} node: [${</span><span style="color: #2F86D2">data</span><span style="color: #A44185">.</span><span style="color: #2F86D2">title</span><span style="color: #A44185">}]`</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">        }</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">default</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: [</span><span style="color: #A44185">&#39;b-iconfont&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;b-icon-setting&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;setting-action&#39;</span><span style="color: #002339">] }),</span></span>
<span class="line"><span style="color: #002339">        </span><span style="color: #7EB233">dropdown</span><span style="color: #002339">: () </span><span style="color: #0991B6">=&gt;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownMenu</span><span style="color: #002339">, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339">, { name: </span><span style="color: #A44185">&#39;edit&#39;</span><span style="color: #002339"> }, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: </span><span style="color: #A44185">&#39;b-iconfont b-icon-edit-square&#39;</span><span style="color: #002339"> }),</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #A44185">&#39;编辑&#39;</span></span>
<span class="line"><span style="color: #002339">            ]),</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #2F86D2">BDropdownItem</span><span style="color: #002339">, { name: </span><span style="color: #A44185">&#39;delete&#39;</span><span style="color: #002339"> }, () </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> [</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;i&#39;</span><span style="color: #002339">, { class: </span><span style="color: #A44185">&#39;b-iconfont b-icon-delete&#39;</span><span style="color: #002339"> }),</span></span>
<span class="line"><span style="color: #002339">              </span><span style="color: #A44185">&#39;删除&#39;</span></span>
<span class="line"><span style="color: #002339">            ])</span></span>
<span class="line"><span style="color: #002339">          ])</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    )</span></span>
<span class="line"><span style="color: #002339">  ]</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #7EB233">h</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;span&#39;</span><span style="color: #002339">, { style: { width: </span><span style="color: #A44185">&#39;100%&#39;</span><span style="color: #002339">, fontSize: </span><span style="color: #A44185">&#39;12px&#39;</span><span style="color: #002339"> }, flex: </span><span style="color: #A44185">&#39;main:justify&#39;</span><span style="color: #002339"> }, </span><span style="color: #2F86D2">inline</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="树选择" tabindex="-1">树选择 <a class="header-anchor" href="#树选择" aria-label="Permalink to &quot;树选择&quot;">​</a></h2><p>由于树选择场景较多，这里也额外封装了一个树形选择器以供表单进行节点选择</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Select.vue" relativepath="./demo/Tree/Select.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div flex><div flex><div class="bin-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="bin-popper-3286" style=""><div class="bin-input-wrapper bin-input-wrapper-default bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-default bin-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->设置默认选中前端组<!--]--></span></button></div><div flex class="ml-16"><div class="bin-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="bin-popper-430" style=""><div class="bin-input-wrapper bin-input-wrapper-default bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-default bin-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->设置默认勾选项目部<!--]--></span></button></div></div><div class="pt-8 pb-8"><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->清空选择<!--]--></span></button></div><div>currentId：00102</div><div>currentNode：{}</div><div>checked：[]</div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree-select</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentId&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">title-key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;defaultSelect&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">设置默认选中前端组</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ml-16&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree-select</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentId&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">v-model:checked</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;checked&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">title-key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">show-checkbox</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;setChecked&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">设置默认勾选项目部</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">class</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;pt-8 pb-8&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;clear&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">清空选择</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">currentId：{{ currentId }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">currentNode：{{ currentNode }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">checked：{{ checked }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yfb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00101&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00102&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;qd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00103&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;UI设计&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;sj&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交互、ui设计中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00104&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;cs&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00105&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yw&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维、服务、巡检&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xmb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目服务部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00201&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;开发组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;kf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端项目开发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00202&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付服务组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付项目，技术服务支持&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentId</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;00102&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">checked</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">defaultSelect</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentId</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00102&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">val</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">?</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">text</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">setChecked</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">checked</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span><span style="color: #F6C177">&#39;002&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00201&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00202&#39;</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">clear</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentId</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">checked</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-tree-select</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentId&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">title-key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">        &gt;&lt;/</span><span style="color: #0444AC">b-tree-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;defaultSelect&quot;</span><span style="color: #002339">&gt;设置默认选中前端组&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ml-16&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-tree-select</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentId&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">v-model:checked</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;checked&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">title-key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">show-checkbox</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">        &gt;&lt;/</span><span style="color: #0444AC">b-tree-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;setChecked&quot;</span><span style="color: #002339">&gt;设置默认勾选项目部&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">class</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;pt-8 pb-8&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;clear&quot;</span><span style="color: #002339">&gt;清空选择&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;currentId：{{ currentId }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;currentNode：{{ currentNode }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;checked：{{ checked }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;001&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    text: </span><span style="color: #A44185">&#39;研发部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    deptCode: </span><span style="color: #A44185">&#39;yfb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    desc: </span><span style="color: #A44185">&#39;研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00101&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;后端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;hd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;后端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00102&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;前端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;qd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;前端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00103&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;UI设计&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;sj&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;交互、ui设计中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00104&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;cs&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00105&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;运维组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;yw&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;运维、服务、巡检&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;002&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    text: </span><span style="color: #A44185">&#39;项目部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    deptCode: </span><span style="color: #A44185">&#39;xmb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    desc: </span><span style="color: #A44185">&#39;项目服务部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00201&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;开发组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;kf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;后端项目开发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00202&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;交付服务组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;jf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;交付项目，技术服务支持&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentId</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;00102&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({})</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">checked</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">defaultSelect</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentId</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;00102&#39;</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">val</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339"> </span><span style="color: #7B30D0">?</span><span style="color: #002339"> { id: </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">id</span><span style="color: #002339">, text: </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">text</span><span style="color: #002339"> } </span><span style="color: #7B30D0">:</span><span style="color: #002339"> {}</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">setChecked</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">checked</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span><span style="color: #A44185">&#39;002&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;00201&#39;</span><span style="color: #002339">, </span><span style="color: #A44185">&#39;00202&#39;</span><span style="color: #002339">]</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">clear</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentId</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;&#39;</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {}</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">checked</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> []</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="树校验" tabindex="-1">树校验 <a class="header-anchor" href="#树校验" aria-label="Permalink to &quot;树校验&quot;">​</a></h2><p>可以结合form表单进行校验提示。</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Valid.vue" relativepath="./demo/Tree/Valid.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div flex><form class="bin-form"><!--[--><div class="bin-form-item is-required"><!--[--><label for="currentId" class="bin-form-item__label" style="width:85px;"><!--[-->树结构<!--]--><span class="item-suffix"></span></label><!--]--><div class="bin-form-item__content" style="width:calc(100% - 85px);"><!--[--><div class="bin-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="bin-popper-8127" style=""><div class="bin-input-wrapper bin-input-wrapper-default bin-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-default bin-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="bin-input-suffix"><!----><!----><!----><!--[--><i class="bin-select__caret b-iconfont b-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><div class="bin-form-item"><!--[--><!----><!--]--><div class="bin-form-item__content" style="width:calc(100% - 85px);padding-left:85px;"><!--[--><button class="bin-button bin-button--primary" type="button"><!----><span class="bin-button__content" style=""><!--[-->提交<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->重置<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><div>currentId：00102</div><div>currentNode：{}</div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">flex</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleFormRef&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label-width</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;85px&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">:rules</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ruleValidate&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">prop</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;currentId&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">label</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;树结构&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-tree-select</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;obj.currentId&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;data&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">title-key</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;text&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #E0DEF4">            </span><span style="color: #C4A7E7; font-style: italic">@change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-tree-select</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">type</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;primary&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;submitForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">提交</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;resetForm&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">重置</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form-item</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-form</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">currentId：{{ obj.currentId }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">currentNode：{{ currentNode }}</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yfb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00101&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;hd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00102&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;qd&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;前端研发中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00103&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;UI设计&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;sj&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交互、ui设计中心&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00104&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;cs&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;测试组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00105&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;yw&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;运维、服务、巡检&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;001&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;xmb&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;项目服务部&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">null</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    children</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00201&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;开发组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;kf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;后端项目开发&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">},</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">        id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00202&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付服务组&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        deptCode</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;jf&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        status</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;1&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        desc</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;交付项目，技术服务支持&#39;</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">        parentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;002&#39;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    ]</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  currentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;00102&#39;</span></span>
<span class="line"><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">currentNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #908CAA">{}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">ruleValidate</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  currentId</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> [</span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> required</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> message</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;树不能为空&#39;</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> trigger</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;change&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">]</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleChange</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">val</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> console.log(val, node)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">currentNode</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">?</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span><span style="color: #E0DEF4"> id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> text</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">text</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">:</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">submitForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">validate</span><span style="color: #E0DEF4">(</span><span style="color: #C4A7E7; font-style: italic">valid</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">valid</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">alert</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;submit!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">else</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;error submit!!&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">false</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">resetForm</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">ruleFormRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">resetFields</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">flex</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-form</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleFormRef&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label-width</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;85px&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">:rules</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ruleValidate&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">prop</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;currentId&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">label</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;树结构&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-tree-select</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;obj.currentId&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;data&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">title-key</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;text&quot;</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">clearable</span></span>
<span class="line"><span style="color: #002339">            </span><span style="color: #DF8618; font-style: italic">@change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleChange&quot;</span></span>
<span class="line"><span style="color: #002339">          &gt;&lt;/</span><span style="color: #0444AC">b-tree-select</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">type</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;primary&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;submitForm&quot;</span><span style="color: #002339">&gt;提交&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;resetForm&quot;</span><span style="color: #002339">&gt;重置&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-form-item</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-form</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;currentId：{{ obj.currentId }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;currentNode：{{ currentNode }}&lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;001&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    text: </span><span style="color: #A44185">&#39;研发部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    deptCode: </span><span style="color: #A44185">&#39;yfb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    desc: </span><span style="color: #A44185">&#39;研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00101&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;后端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;hd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;后端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00102&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;前端组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;qd&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;前端研发中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00103&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;UI设计&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;sj&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;交互、ui设计中心&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00104&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;cs&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;测试组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00105&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;运维组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;yw&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;运维、服务、巡检&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;001&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  },</span></span>
<span class="line"><span style="color: #002339">  {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #A44185">&#39;002&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    text: </span><span style="color: #A44185">&#39;项目部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    deptCode: </span><span style="color: #A44185">&#39;xmb&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    desc: </span><span style="color: #A44185">&#39;项目服务部&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    parentId: </span><span style="color: #174781">null</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    children: [</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00201&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;开发组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;kf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;后端项目开发&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">      },</span></span>
<span class="line"><span style="color: #002339">      {</span></span>
<span class="line"><span style="color: #002339">        id: </span><span style="color: #A44185">&#39;00202&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        text: </span><span style="color: #A44185">&#39;交付服务组&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        deptCode: </span><span style="color: #A44185">&#39;jf&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        status: </span><span style="color: #A44185">&#39;1&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        desc: </span><span style="color: #A44185">&#39;交付项目，技术服务支持&#39;</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">        parentId: </span><span style="color: #A44185">&#39;002&#39;</span></span>
<span class="line"><span style="color: #002339">      }</span></span>
<span class="line"><span style="color: #002339">    ]</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({</span></span>
<span class="line"><span style="color: #002339">  currentId: </span><span style="color: #A44185">&#39;00102&#39;</span></span>
<span class="line"><span style="color: #002339">})</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">currentNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">({})</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">ruleValidate</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">  currentId: [{ required: </span><span style="color: #174781">true</span><span style="color: #002339">, message: </span><span style="color: #A44185">&#39;树不能为空&#39;</span><span style="color: #002339">, trigger: </span><span style="color: #A44185">&#39;change&#39;</span><span style="color: #002339"> }]</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleChange</span><span style="color: #002339">(</span><span style="color: #B1108E">val</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// console.log(val, node)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">currentNode</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339"> </span><span style="color: #7B30D0">?</span><span style="color: #002339"> { id: </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">id</span><span style="color: #002339">, text: </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">text</span><span style="color: #002339"> } </span><span style="color: #7B30D0">:</span><span style="color: #002339"> {}</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">submitForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">validate</span><span style="color: #002339">(</span><span style="color: #B1108E">valid</span><span style="color: #002339"> </span><span style="color: #0991B6">=&gt;</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">valid</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">alert</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;submit!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    } </span><span style="color: #7B30D0">else</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;error submit!!&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">false</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">  })</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">resetForm</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">ruleFormRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">resetFields</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="big-tree-超大数据" tabindex="-1">Big-Tree 超大数据 <a class="header-anchor" href="#big-tree-超大数据" aria-label="Permalink to &quot;Big-Tree 超大数据&quot;">​</a></h2><p>如果需要渲染超大数据量的属性结构，需要使用扩展组件<code>&lt;b-big-tree&gt;</code>,组件内部 api 基本复用树结构所有属性，对树形结构进行优化，利用可视区域位置来进行过滤筛选节点并进行操作， 但为了性能的提示必然要牺牲部分体验，因此大数据量的树结构不提供动画展开缩放效果</p><p>默认节点高度为<code>28px</code>，可通过<code>visible-count</code>指定树可是区域显示的节点个数，默认为 15 个 即<code>420px</code>因为是针对可视区域的滚动优化，因此必须指定容器高度</p><div class="vitepress-demo-preview__element-plus__container" suffixname="vue" absolutepath="D:\Workspace\MyProject\bin-ui-design\demo\components\demo\Tree\Big.vue" relativepath="./demo/Tree/Big.vue"><section class="vitepress-demo-preview-preview"><!--[--><div><div style="margin-bottom:8px;"><div class="bin-space bin-space--horizontal" style="align-items:center;"><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--> 数据条数： <!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="bin-input-number" style="width:120px;"><!--[--><span class="bin-input-number-handler bin-input-number-handler-up"><span class="bin-input-number-handler-up-inner b-iconfont b-icon-up"></span></span><span class="bin-input-number-handler bin-input-number-handler-down"><span class="bin-input-number-handler-down-inner b-iconfont b-icon-down"></span></span><!--]--><div class="bin-input-number-input-wrap"><input class="bin-input-number-input" autocomplete="off" spellcheck="false" value="5000" placeholder=""></div></div><!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->渲染<!--]--></span></button><!--]--></div><div class="bin-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="bin-input-wrapper bin-input-type-text bin-input-group-with-append bin-input-with-search" style="width:230px;"><!--[--><!----><input autocomplete="off" type="text" class="bin-input bin-input-with-suffix" placeholder="输入过滤条件后回车筛选" value="" number="false"><!----><span class="bin-input-suffix"><!----><i class="bin-input-icon bin-input-icon-normal bin-input-search-icon b-iconfont b-icon-search"></i><!----><!--[--><!----><!--]--><!----></span><!----><!----><!----><!--]--></div><!--]--></div><div class="bin-space__item" style="padding-bottom:0px;"><!--[--><div class="bin-button-group"><!--[--><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->展开所有<!--]--></span></button><button class="bin-button bin-button--default" type="button"><!----><span class="bin-button__content" style=""><!--[-->收起所有<!--]--></span></button><!--]--></div><!--]--></div></div></div><div class="bin-divider bin-divider-horizontal" style="margin:14px 0;"><!----></div><div class="bin-tree" style="position:relative;overflow:auto;height:280px;"><div><div class="bin-empty bin-empty-normal" style="margin:16px 0;"><div class="bin-empty-image"><!--[--><svg class="bin-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="bin-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="bin-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="bin-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="bin-empty-description"><!--[-->暂无数据<!--]--></p></div></div></div></div><!--]--></section><section class="vitepress-demo-preview-description"><div class="vitepress-demo-preview-description__split-line"></div><div class="vitepress-demo-preview-description__handle-btn"><svg t="1661231422733" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3259" width="20" height="20"><path d="M682.666667 810.666667c-12.8 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733334l226.133333-226.133333-226.133333-226.133333c-17.066667-17.066667-17.066667-42.666667 0-59.733334s42.666667-17.066667 59.733333 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-17.066667 12.8-29.866666 12.8zM341.333333 810.666667c-12.8 0-21.333333-4.266667-29.866666-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733333 0s17.066667 42.666667 0 59.733334L145.066667 512l226.133333 226.133333c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-17.066667 12.8-29.866667 12.8z" p-id="3260"></path></svg><svg viewBox="0 0 544 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M399.503 143.667C399.319 152.501 406.332 159.812 415.167 159.997C424.001 160.181 431.312 153.168 431.497 144.333L399.503 143.667ZM416 120L431.997 120.333C431.999 120.207 432 120.081 432 119.954L416 120ZM360 64L360.046 48.0001C360.03 48 360.015 48 360 48L360 64ZM144 64V48C143.984 48 143.968 48 143.953 48.0001L144 64ZM80 128L64.0001 127.953C64 127.968 64 127.984 64 128L80 128ZM80 344H64C64 344.015 64 344.03 64.0001 344.046L80 344ZM136 400L135.954 416C135.97 416 135.985 416 136 416L136 400ZM160 416C168.837 416 176 408.837 176 400C176 391.163 168.837 384 160 384V416ZM217 160H439V128H217V160ZM439 160C461.644 160 480 178.356 480 201H512C512 160.683 479.317 128 439 128V160ZM480 201V423H512V201H480ZM480 423C480 445.644 461.644 464 439 464V496C479.317 496 512 463.317 512 423H480ZM439 464H217V496H439V464ZM217 464C194.356 464 176 445.644 176 423H144C144 463.317 176.683 496 217 496V464ZM176 423V201H144V423H176ZM176 201C176 178.356 194.356 160 217 160V128C176.683 128 144 160.683 144 201H176ZM431.497 144.333L431.997 120.333L400.003 119.667L399.503 143.667L431.497 144.333ZM432 119.954C431.946 100.888 424.347 82.6173 410.865 69.1349L388.238 91.7624C395.741 99.2658 399.97 109.434 400 120.046L432 119.954ZM410.865 69.1349C397.383 55.6526 379.112 48.0543 360.046 48.0001L359.954 79.9999C370.566 80.0301 380.734 84.2589 388.238 91.7624L410.865 69.1349ZM360 48H144V80H360V48ZM143.953 48.0001C122.767 48.0627 102.467 56.5064 87.4868 71.4868L110.114 94.1142C119.117 85.1118 131.316 80.0376 144.047 79.9999L143.953 48.0001ZM87.4868 71.4868C72.5064 86.4673 64.0627 106.767 64.0001 127.953L95.9999 128.047C96.0376 115.316 101.112 103.117 110.114 94.1142L87.4868 71.4868ZM64 128V344H96V128H64ZM64.0001 344.046C64.0543 363.112 71.6526 381.383 85.1349 394.865L107.762 372.238C100.259 364.734 96.0301 354.566 95.9999 343.954L64.0001 344.046ZM85.1349 394.865C98.6173 408.347 116.888 415.946 135.954 416L136.046 384C125.434 383.97 115.266 379.741 107.762 372.238L85.1349 394.865ZM136 416H160V384H136V416Z" fill="currentColor"></path></svg></div></section><section class="vitepress-demo-preview-source"><div class="language-vue"><pre v-pre class="shiki rose-pine-moon vp-code-dark" ><code><span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">div</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin-bottom: 8px&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-space</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        数据条数：</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;number&quot;</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 120px&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input-number</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;init&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">渲染</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-input</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">v-model</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;query&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">search</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">placeholder</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #C4A7E7; font-style: italic">@search</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-input</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;expandAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">展开所有</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">          </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-button</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">@click</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;collapseAll&quot;</span><span style="color: #6E6A86">&gt;</span><span style="color: #E0DEF4">收起所有</span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">        </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-button-group</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">b-space</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-divider</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">style</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;margin: 14px 0&quot;</span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-divider</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">b-big-tree</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">ref</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treeRef&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:data</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;treedata&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:visible-count</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;10&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">:filter-node-method</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;filterNode&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #C4A7E7; font-style: italic">@select-change</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;handleSelected&quot;</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #6E6A86">&gt;&lt;/</span><span style="color: #9CCFD8">b-big-tree</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">div</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">template</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #6E6A86">&lt;</span><span style="color: #9CCFD8">script</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">setup</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">lang</span><span style="color: #908CAA">=</span><span style="color: #F6C177">&quot;ts&quot;</span><span style="color: #6E6A86">&gt;</span></span>
<span class="line"><span style="color: #3E8FB0">import </span><span style="color: #908CAA">{</span><span style="color: #3E8FB0"> </span><span style="color: #E0DEF4; font-style: italic">ref</span><span style="color: #3E8FB0"> </span><span style="color: #908CAA">}</span><span style="color: #3E8FB0"> from </span><span style="color: #F6C177">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treedata</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">number</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">5000</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">query</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #F6C177">&#39;&#39;</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">ref</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">null</span><span style="color: #E0DEF4">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">10000</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 最大的节点数</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childNodesNumber</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> [</span><span style="color: #EA9A97">2</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">5</span><span style="color: #E0DEF4">] </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 子节点数</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxLevel</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">3</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 最大嵌套层级</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childRate</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0.4</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 拥有子节点的概率</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">label</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">&#39;节点&#39;</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> 节点label</span></span>
<span class="line"><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">randomInteger</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">min</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">max</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">result</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">min</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0.5</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">+</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Math</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">random</span><span style="color: #E0DEF4">() </span><span style="color: #3E8FB0">*</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">max</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">min</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">+</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">result</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Math</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">round</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">result</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">result</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">generateId</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">++</span><span style="color: #E0DEF4; font-style: italic">index</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">Math</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">random</span><span style="color: #E0DEF4">()</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">toString</span><span style="color: #E0DEF4">()</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">slice</span><span style="color: #E0DEF4">(</span><span style="color: #EA9A97">3</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">*</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">generateNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">generateId</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    id</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">,</span></span>
<span class="line"><span style="color: #E0DEF4">    title</span><span style="color: #908CAA">:</span><span style="color: #E0DEF4"> </span><span style="color: #F6C177">`</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">label</span><span style="color: #908CAA">}</span><span style="color: #F6C177">_</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #908CAA">}</span><span style="color: #F6C177">-id：</span><span style="color: #908CAA">${</span><span style="color: #E0DEF4; font-style: italic">id</span><span style="color: #908CAA">}</span><span style="color: #F6C177">`</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">generateChild</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">tree</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">level</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">return</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">tree</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> []</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childNumber</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">randomInteger</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">childNodesNumber</span><span style="color: #E0DEF4">[</span><span style="color: #EA9A97">0</span><span style="color: #E0DEF4">]</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childNodesNumber</span><span style="color: #E0DEF4">[</span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">])</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">for</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">i</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">0</span><span style="color: #908CAA">;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">i</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&lt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childNumber</span><span style="color: #908CAA">;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">i</span><span style="color: #3E8FB0">++</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&gt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">1</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">break</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">generateNode</span><span style="color: #E0DEF4">()</span></span>
<span class="line"></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">Math</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">random</span><span style="color: #E0DEF4">() </span><span style="color: #3E8FB0">&lt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">childRate</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&amp;&amp;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">level</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&lt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxLevel</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">      </span><span style="color: #EA9A97">generateChild</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">++</span><span style="color: #E0DEF4; font-style: italic">level</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">tree</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">children</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #3E8FB0">const</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97; font-style: italic">generate</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">number</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> eslint-disable-next-line no-const-assign</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">maxNode</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">number</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> eslint-disable-next-line no-unmodified-loop-condition</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">while</span><span style="color: #E0DEF4"> (</span><span style="color: #E0DEF4; font-style: italic">index</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">&lt;</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">maxNode</span><span style="color: #E0DEF4">) </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #3E8FB0">let</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">generateNode</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #EA9A97">generateChild</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">    </span><span style="color: #E0DEF4; font-style: italic">data</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">push</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">obj</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">data</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">init</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treedata</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">=</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">generate</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">number</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleSelected</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">allSelected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">console</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">log</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">allSelected</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">expandAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">expandAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">collapseAll</span><span style="color: #908CAA">()</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">collapseAll</span><span style="color: #E0DEF4">()</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">handleFilter</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #E0DEF4; font-style: italic">treeRef</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">filter</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">)</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #3E8FB0">function</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">filterNode</span><span style="color: #908CAA">(</span><span style="color: #C4A7E7; font-style: italic">value</span><span style="color: #908CAA">,</span><span style="color: #E0DEF4"> </span><span style="color: #C4A7E7; font-style: italic">node</span><span style="color: #908CAA">)</span><span style="color: #E0DEF4"> </span><span style="color: #908CAA">{</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">if</span><span style="color: #E0DEF4"> (</span><span style="color: #3E8FB0">!</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #EA9A97">true</span></span>
<span class="line"><span style="color: #908CAA">  </span><span style="color: #908CAA; font-style: italic">//</span><span style="color: #6E6A86; font-style: italic"> return node.title===value.trim()</span></span>
<span class="line"><span style="color: #E0DEF4">  </span><span style="color: #3E8FB0">return</span><span style="color: #E0DEF4"> </span><span style="color: #E0DEF4; font-style: italic">node</span><span style="color: #3E8FB0">.</span><span style="color: #E0DEF4; font-style: italic">title</span><span style="color: #3E8FB0">.</span><span style="color: #EA9A97">indexOf</span><span style="color: #E0DEF4">(</span><span style="color: #E0DEF4; font-style: italic">value</span><span style="color: #E0DEF4">) </span><span style="color: #3E8FB0">!==</span><span style="color: #E0DEF4"> </span><span style="color: #3E8FB0">-</span><span style="color: #EA9A97">1</span></span>
<span class="line"><span style="color: #908CAA">}</span></span>
<span class="line"><span style="color: #6E6A86">&lt;/</span><span style="color: #9CCFD8">script</span><span style="color: #6E6A86">&gt;</span></span></code></pre><pre v-pre class="shiki slack-ochin vp-code-light" ><code><span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">div</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin-bottom: 8px&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;</span><span style="color: #0444AC">b-space</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        数据条数：</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;number&quot;</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 120px&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-input-number</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;init&quot;</span><span style="color: #002339">&gt;渲染&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-input</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">v-model</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;query&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">search</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">placeholder</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="color: #002339">          </span><span style="color: #DF8618; font-style: italic">@search</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="color: #002339">        &gt;&lt;/</span><span style="color: #0444AC">b-input</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;</span><span style="color: #0444AC">b-button-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;expandAll&quot;</span><span style="color: #002339">&gt;展开所有&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">          &lt;</span><span style="color: #0444AC">b-button</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">@click</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;collapseAll&quot;</span><span style="color: #002339">&gt;收起所有&lt;/</span><span style="color: #0444AC">b-button</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">        &lt;/</span><span style="color: #0444AC">b-button-group</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">      &lt;/</span><span style="color: #0444AC">b-space</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-divider</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">style</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;margin: 14px 0&quot;</span><span style="color: #002339">&gt;&lt;/</span><span style="color: #0444AC">b-divider</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">    &lt;</span><span style="color: #0444AC">b-big-tree</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">ref</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treeRef&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:data</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;treedata&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:visible-count</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;10&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">:filter-node-method</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;filterNode&quot;</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #DF8618; font-style: italic">@select-change</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;handleSelected&quot;</span></span>
<span class="line"><span style="color: #002339">    &gt;&lt;/</span><span style="color: #0444AC">b-big-tree</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">  &lt;/</span><span style="color: #0444AC">div</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">template</span><span style="color: #002339">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">&lt;</span><span style="color: #0444AC">script</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">setup</span><span style="color: #002339"> </span><span style="color: #DF8618; font-style: italic">lang</span><span style="color: #002339">=</span><span style="color: #A44185">&quot;ts&quot;</span><span style="color: #002339">&gt;</span></span>
<span class="line"><span style="color: #7B30D0">import</span><span style="color: #002339"> { </span><span style="color: #2F86D2">ref</span><span style="color: #002339"> } </span><span style="color: #7B30D0">from</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;vue&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treedata</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">([])</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">number</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">5000</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">query</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #A44185">&#39;&#39;</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">ref</span><span style="color: #002339">(</span><span style="color: #174781">null</span><span style="color: #002339">)</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">10000</span><span style="color: #002339"> </span><span style="color: #357B42; font-style: italic">// 最大的节点数</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">childNodesNumber</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> [</span><span style="color: #174781">2</span><span style="color: #002339">, </span><span style="color: #174781">5</span><span style="color: #002339">] </span><span style="color: #357B42; font-style: italic">// 子节点数</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxLevel</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">3</span><span style="color: #002339"> </span><span style="color: #357B42; font-style: italic">// 最大嵌套层级</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">childRate</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">0.4</span><span style="color: #002339"> </span><span style="color: #357B42; font-style: italic">// 拥有子节点的概率</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">label</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #A44185">&#39;节点&#39;</span><span style="color: #002339"> </span><span style="color: #357B42; font-style: italic">// 节点label</span></span>
<span class="line"><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">0</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> []</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">randomInteger</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #0991B6">function</span><span style="color: #002339"> (</span><span style="color: #B1108E">min</span><span style="color: #002339">, </span><span style="color: #B1108E">max</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">result</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">min</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #002339"> </span><span style="color: #174781">0.5</span><span style="color: #002339"> </span><span style="color: #7B30D0">+</span><span style="color: #002339"> </span><span style="color: #2F86D2">Math</span><span style="color: #002339">.</span><span style="color: #7EB233">random</span><span style="color: #002339">() </span><span style="color: #7B30D0">*</span><span style="color: #002339"> (</span><span style="color: #2F86D2">max</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #002339"> </span><span style="color: #2F86D2">min</span><span style="color: #002339"> </span><span style="color: #7B30D0">+</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">result</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">Math</span><span style="color: #002339">.</span><span style="color: #7EB233">round</span><span style="color: #002339">(</span><span style="color: #2F86D2">result</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">result</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">generateId</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #0991B6">function</span><span style="color: #002339"> () {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">++</span><span style="color: #2F86D2">index</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">Math</span><span style="color: #002339">.</span><span style="color: #7EB233">random</span><span style="color: #002339">().</span><span style="color: #7EB233">toString</span><span style="color: #002339">().</span><span style="color: #7EB233">slice</span><span style="color: #002339">(</span><span style="color: #174781">3</span><span style="color: #002339">) </span><span style="color: #7B30D0">*</span><span style="color: #002339"> </span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">generateNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #0991B6">function</span><span style="color: #002339"> () {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">id</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">generateId</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> {</span></span>
<span class="line"><span style="color: #002339">    id: </span><span style="color: #2F86D2">id</span><span style="color: #002339">,</span></span>
<span class="line"><span style="color: #002339">    title: </span><span style="color: #A44185">`${</span><span style="color: #2F86D2">label</span><span style="color: #A44185">}_${</span><span style="color: #2F86D2">index</span><span style="color: #A44185">}-id：${</span><span style="color: #2F86D2">id</span><span style="color: #A44185">}`</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">generateChild</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #0991B6">function</span><span style="color: #002339"> (</span><span style="color: #B1108E">tree</span><span style="color: #002339">, </span><span style="color: #B1108E">level</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339">) </span><span style="color: #7B30D0">return</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">tree</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> []</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">childNumber</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">randomInteger</span><span style="color: #002339">(</span><span style="color: #2F86D2">childNodesNumber</span><span style="color: #002339">[</span><span style="color: #174781">0</span><span style="color: #002339">], </span><span style="color: #2F86D2">childNodesNumber</span><span style="color: #002339">[</span><span style="color: #174781">1</span><span style="color: #002339">])</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">for</span><span style="color: #002339"> (</span><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">i</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #174781">0</span><span style="color: #002339">; </span><span style="color: #2F86D2">i</span><span style="color: #002339"> </span><span style="color: #7B30D0">&lt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">childNumber</span><span style="color: #002339">; </span><span style="color: #2F86D2">i</span><span style="color: #7B30D0">++</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">&gt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #002339"> </span><span style="color: #174781">1</span><span style="color: #002339">) </span><span style="color: #7B30D0">break</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">generateNode</span><span style="color: #002339">()</span></span>
<span class="line"></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #2F86D2">Math</span><span style="color: #002339">.</span><span style="color: #7EB233">random</span><span style="color: #002339">() </span><span style="color: #7B30D0">&lt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">childRate</span><span style="color: #002339"> </span><span style="color: #7B30D0">&amp;&amp;</span><span style="color: #002339"> </span><span style="color: #2F86D2">level</span><span style="color: #002339"> </span><span style="color: #7B30D0">&lt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxLevel</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">      </span><span style="color: #7EB233">generateChild</span><span style="color: #002339">(</span><span style="color: #2F86D2">obj</span><span style="color: #002339">, </span><span style="color: #7B30D0">++</span><span style="color: #2F86D2">level</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    }</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">tree</span><span style="color: #002339">.</span><span style="color: #2F86D2">children</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">(</span><span style="color: #2F86D2">obj</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"></span>
<span class="line"><span style="color: #0991B6">const</span><span style="color: #002339"> </span><span style="color: #7EB233">generate</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #0991B6">function</span><span style="color: #002339"> (</span><span style="color: #B1108E">number</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// eslint-disable-next-line no-const-assign</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">maxNode</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #2F86D2">number</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// eslint-disable-next-line no-unmodified-loop-condition</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">while</span><span style="color: #002339"> (</span><span style="color: #2F86D2">index</span><span style="color: #002339"> </span><span style="color: #7B30D0">&lt;</span><span style="color: #002339"> </span><span style="color: #2F86D2">maxNode</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #0991B6">let</span><span style="color: #002339"> </span><span style="color: #2F86D2">obj</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">generateNode</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #7EB233">generateChild</span><span style="color: #002339">(</span><span style="color: #2F86D2">obj</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">    </span><span style="color: #2F86D2">data</span><span style="color: #002339">.</span><span style="color: #7EB233">push</span><span style="color: #002339">(</span><span style="color: #2F86D2">obj</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">  }</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">data</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">init</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treedata</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339"> </span><span style="color: #7B30D0">=</span><span style="color: #002339"> </span><span style="color: #7EB233">generate</span><span style="color: #002339">(</span><span style="color: #2F86D2">number</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleSelected</span><span style="color: #002339">(</span><span style="color: #B1108E">allSelected</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">console</span><span style="color: #002339">.</span><span style="color: #7EB233">log</span><span style="color: #002339">(</span><span style="color: #2F86D2">allSelected</span><span style="color: #002339">, </span><span style="color: #2F86D2">node</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">expandAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">expandAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">collapseAll</span><span style="color: #002339">() {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">collapseAll</span><span style="color: #002339">()</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">handleFilter</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #2F86D2">treeRef</span><span style="color: #002339">.</span><span style="color: #2F86D2">value</span><span style="color: #002339">.</span><span style="color: #7EB233">filter</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">)</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #0991B6">function</span><span style="color: #002339"> </span><span style="color: #7EB233">filterNode</span><span style="color: #002339">(</span><span style="color: #B1108E">value</span><span style="color: #002339">, </span><span style="color: #B1108E">node</span><span style="color: #002339">) {</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">if</span><span style="color: #002339"> (</span><span style="color: #7B30D0">!</span><span style="color: #2F86D2">value</span><span style="color: #002339">) </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #174781">true</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #357B42; font-style: italic">// return node.title===value.trim()</span></span>
<span class="line"><span style="color: #002339">  </span><span style="color: #7B30D0">return</span><span style="color: #002339"> </span><span style="color: #2F86D2">node</span><span style="color: #002339">.</span><span style="color: #2F86D2">title</span><span style="color: #002339">.</span><span style="color: #7EB233">indexOf</span><span style="color: #002339">(</span><span style="color: #2F86D2">value</span><span style="color: #002339">) </span><span style="color: #7B30D0">!==</span><span style="color: #002339"> </span><span style="color: #7B30D0">-</span><span style="color: #174781">1</span></span>
<span class="line"><span style="color: #002339">}</span></span>
<span class="line"><span style="color: #002339">&lt;/</span><span style="color: #0444AC">script</span><span style="color: #002339">&gt;</span></span></code></pre></div></section></div><h2 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>data</td><td>可嵌套的节点属性的数组，生成 tree 的数据</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>multiple</td><td>是否支持多选</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>show-checkbox</td><td>是否显示多选框</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>empty-text</td><td>没有数据时的提示</td><td>String</td><td>—</td><td>暂无数据</td></tr><tr><td>load-data</td><td>异步加载数据的方法，见示例</td><td>Function</td><td>—</td><td>—</td></tr><tr><td>title-key</td><td>定义 title 键,默认 title</td><td>String</td><td>—</td><td>title</td></tr><tr><td>children-key</td><td>定义子节点键,默认 children 为子节点 key</td><td>String</td><td>—</td><td>children</td></tr><tr><td>check-strictly</td><td>复选框的情况下，是否严格的遵循父子不互相关联的做法</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>check-directly</td><td>开启后，在 show-checkbox 模式下，select 的交互也将转为 check</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>lock-select</td><td>锁定树选择，再部分业务中常用，比如开启弹窗后禁用树的选中操作</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>title-ellipsis</td><td>是否开启标题超长省略</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>draggable</td><td>是否开启拖拽节点功能</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>allow-drag</td><td>判断节点能否被拖拽 如果返回 false ，节点不能被拖动</td><td>Function(node)</td><td>—</td><td>—</td></tr><tr><td>allow-drop</td><td>拖拽时判定目标节点能否成为拖动目标位置。 返回false拖动节点不能被拖放到目标节点。type 参数有三种情况：&#39;prev&#39;、&#39;inner&#39;和 &#39;next&#39;，表示放置在目标节点前、插入目标节点和放置在目标节点后</td><td>Function(draggingNode, dropNode, type)</td><td>—</td><td>—</td></tr><tr><td>filter-node-method</td><td>筛选过滤树节点函数</td><td>Function</td><td>—</td><td>—</td></tr><tr><td>highlight-filter</td><td>高亮搜索条件文字</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>timeout</td><td>刷新频率（<code>&lt;b-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>17</td></tr><tr><td>itemHeight</td><td>节点高度 （<code>&lt;b-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>28</td></tr><tr><td>visibleCount</td><td>显示区域个数（<code>&lt;b-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>15</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>select-change</td><td>点击树节点时触发</td><td>当前已选中的节点数组、当前项、flatState</td></tr><tr><td>check-change</td><td>点击复选框时触发</td><td>当前已勾选节点的数组、当前项、包含半选的节点数组、flatState</td></tr><tr><td>toggle-expand</td><td>展开和收起子列表时触发</td><td>当前节点的数据</td></tr><tr><td>node-drag-start</td><td>拖拽节点开始事件</td><td>被拖拽节点对应的 Node、event</td></tr><tr><td>node-drag-enter</td><td>拖拽节点进入事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、event</td></tr><tr><td>node-drag-leave</td><td>拖拽节点移除事件</td><td>被拖拽节点对应的 Node、所离开节点对应的 Node、event</td></tr><tr><td>node-drag-over</td><td>拖拽节点 over 事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、event</td></tr><tr><td>node-drag-end</td><td>拖拽节点结束事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、放置节点类型 dropType、event</td></tr><tr><td>node-drag</td><td>拖拽节点结束事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、放置节点类型 dropType、event</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to &quot;Methods&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>getFlatState</td><td>拍平的数组 buffer，包含层级关系及索引 无</td><td></td></tr><tr><td>getCheckedNodes</td><td>获取被勾选的节点</td><td>无</td></tr><tr><td>getSelectedNodes</td><td>获取被选中的节点</td><td>无</td></tr><tr><td>getCheckedAndIndeterminateNodes</td><td>获取选中及半选节点</td><td>无</td></tr><tr><td>filter</td><td>树节点过滤函数，必须设置 filter-node-method 过滤匹配函数</td><td>无</td></tr><tr><td>setChecked</td><td>设置 node 勾选 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true</td><td>无</td></tr><tr><td>setSelected</td><td>设置 node 单选 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true，expandParent：是否展开祖先节点，默认 true</td><td>无</td></tr><tr><td>setExpand</td><td>设置 node 展开 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true</td><td>无</td></tr><tr><td>expandAll</td><td>展开所有</td><td>无</td></tr><tr><td>collapseAll</td><td>收起所有</td><td>无</td></tr><tr><td>checkAll</td><td>勾选所有</td><td>无</td></tr><tr><td>unselectAll</td><td>取消所有单选</td><td>无</td></tr><tr><td>uncheckAll</td><td>取消全部勾选</td><td>无</td></tr></tbody></table><h2 id="children" tabindex="-1">Children <a class="header-anchor" href="#children" aria-label="Permalink to &quot;Children&quot;">​</a></h2><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>icon</td><td>节点显示 icon</td><td>String</td><td>—</td></tr><tr><td>title</td><td>节点显示标题</td><td>String</td><td>—</td></tr><tr><td>expand</td><td>是否展开直子节点</td><td>Boolean</td><td>false</td></tr><tr><td>disabled</td><td>禁用</td><td>Boolean</td><td>false</td></tr><tr><td>disableCheckbox</td><td>禁用单选框</td><td>Boolean</td><td>false</td></tr><tr><td>selected</td><td>是否选中子节点</td><td>Boolean</td><td>false</td></tr><tr><td>checked</td><td>是否勾选(如果勾选，子节点也会全部勾选)</td><td>Boolean</td><td>false</td></tr><tr><td>visible</td><td>是否显示节点(可通过操作节点 visible 属性隐藏节点)</td><td>Boolean</td><td>false</td></tr><tr><td>children</td><td>子节点属性数组，可以设置 tree 组件 children-key 属性来自定义</td><td>Array</td><td>—</td></tr><tr><td>loading</td><td>可设置为异步加载节点，需配合 loadData 设置加载函数</td><td>Boolean</td><td>—</td></tr><tr><td>isLeaf</td><td>是否为叶子节点，可控制是否显示箭头，可配合异步加载实现</td><td>Boolean</td><td>—</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-9f9999b2 data-v-61fb544c><!--[--><!--]--><!----><nav class="prev-next" data-v-61fb544c><div class="pager" data-v-61fb544c><a class="pager-link prev" href="/bin-ui-design/components/form.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Previous page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-reconciliation"></i>表单<span>Form</span></span></a></div><div class="pager" data-v-61fb544c><a class="pager-link next" href="/bin-ui-design/components/table.html" data-v-61fb544c><span class="desc" data-v-61fb544c>Next page</span><span class="title" data-v-61fb544c><i class="b-iconfont b-icon-table"></i>表格<span>Table</span></span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-10b21a41 data-v-1c165e87><div class="container" data-v-1c165e87><!----><p class="copyright" data-v-1c165e87>MIT Licensed | Copyright © 2023-present bin-ui-design</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_calendar.md\":\"ed1fb758\",\"components_affix.md\":\"c7b107b7\",\"components_back-top.md\":\"a90798a3\",\"components_breadcrumb.md\":\"e45c7120\",\"components_badge.md\":\"a83e273c\",\"components_alert.md\":\"fce5ac8e\",\"components_contextmenu.md\":\"3a8ef142\",\"components_circle.md\":\"7c03ee32\",\"components_config-provider.md\":\"bbf6fd0c\",\"components_checkbox.md\":\"2cb0b537\",\"components_carousel.md\":\"501e54e7\",\"components_empty.md\":\"0f6ba589\",\"components_layout.md\":\"e372cf7d\",\"components_count-to.md\":\"4af99aa6\",\"components_loading-bar.md\":\"dac78d00\",\"components_desc.md\":\"e468461f\",\"components_scrollbar.md\":\"291e9d8e\",\"components_anchor.md\":\"9b9a5663\",\"components_card.md\":\"8f27d101\",\"components_divider.md\":\"b50c7752\",\"docs_changelog.md\":\"deb42a54\",\"components_color-picker.md\":\"67dfd5c6\",\"components_notice.md\":\"a4721004\",\"docs_introduction.md\":\"e33e2b29\",\"index.md\":\"554113db\",\"components_button.md\":\"c7f6d651\",\"components_page.md\":\"8728f48d\",\"components_split.md\":\"383fbbe8\",\"docs_jsx.md\":\"58e48e69\",\"components_collapse.md\":\"39f1c339\",\"components_input-number.md\":\"b95178ec\",\"docs_common-directive.md\":\"79801c01\",\"docs_color-design.md\":\"1674c3b9\",\"components_trend.md\":\"2b24adde\",\"components_message-box.md\":\"5ea759a2\",\"components_dropdown.md\":\"13a35e2a\",\"components_upload.md\":\"5e2cedc1\",\"components_rate.md\":\"35271357\",\"docs_import-on-demand.md\":\"ffd56fe6\",\"components_radio.md\":\"5fd31931\",\"components_switch.md\":\"473de9e1\",\"docs_usage-sfc.md\":\"4b699947\",\"docs_common-transition.md\":\"3e08447c\",\"docs_installation.md\":\"f27febf3\",\"components_image.md\":\"30431bac\",\"docs_custom-theme.md\":\"f26d8f9a\",\"components_popper.md\":\"5c9082ec\",\"components_message.md\":\"d61ecb84\",\"components_steps.md\":\"de125854\",\"components_space.md\":\"20f9ed13\",\"components_input.md\":\"37684c1c\",\"components_tag.md\":\"17b4b0b1\",\"components_loading.md\":\"822d7cf0\",\"components_time-picker.md\":\"ca9c42c9\",\"components_slider.md\":\"fa819be3\",\"components_menu.md\":\"7998f13c\",\"components_skeleton.md\":\"54c428ce\",\"components_select.md\":\"d96ed960\",\"components_drawer.md\":\"7520003f\",\"components_popover.md\":\"7a2b8b43\",\"components_timeline.md\":\"e9bdf997\",\"docs_common-css.md\":\"2b6e0566\",\"components_progress.md\":\"4a41caad\",\"components_icon.md\":\"e611d267\",\"docs_common-api.md\":\"34166aab\",\"components_cascader.md\":\"9ad54021\",\"components_tooltip.md\":\"18368c1a\",\"components_grid.md\":\"d5620c5c\",\"components_tabs.md\":\"67864029\",\"components_modal.md\":\"0d1f6c25\",\"components_date-picker.md\":\"e2b2057a\",\"components_form.md\":\"5d25e7cb\",\"components_table.md\":\"6af60abd\",\"components_tree.md\":\"d80b44bd\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"BIN-UI-DESIGN\",\"description\":\"A Compontnts Lib for Vue3\",\"base\":\"/bin-ui-design/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.svg\",\"siteTitle\":\"BIN-UI-DESIGN\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/docs/introduction\",\"activeMatch\":\"/docs/\"},{\"text\":\"组件\",\"link\":\"/components/button\",\"activeMatch\":\"/components/\"},{\"text\":\"生态系统\",\"items\":[{\"text\":\"资源\",\"link\":\"\"},{\"text\":\"bin-admin-pro\",\"link\":\"https://wangbin3162.github.io/bin-admin-pro/\",\"target\":\"_blank\"},{\"text\":\"bin-datav\",\"link\":\"https://wangbin3162.github.io/bin-datav\",\"target\":\"_blank\"},{\"text\":\"bin-datav-schema\",\"link\":\"https://wangbin3162.github.io/bin-datav-schema/\",\"target\":\"_blank\"},{\"text\":\"官方库v3\",\"link\":\"\"},{\"text\":\"bin-ui-next\",\"link\":\"https://wangbin3162.github.io/bin-ui-next/\",\"target\":\"_blank\"},{\"text\":\"bin-editor-next\",\"link\":\"https://wangbin3162.github.io/bin-editor-next/\",\"target\":\"_blank\"},{\"text\":\"bin-charts-next\",\"link\":\"https://wangbin3162.github.io/bin-charts-next/\",\"target\":\"_blank\"},{\"text\":\"官方库v2\",\"link\":\"\"},{\"text\":\"bin-ui\",\"link\":\"https://wangbin3162.github.io/bin-ui/\",\"target\":\"_blank\"},{\"text\":\"bin-ace-editor\",\"link\":\"https://wangbin3162.github.io/bin-ace-editor/\",\"target\":\"_blank\"},{\"text\":\"bin-charts\",\"link\":\"https://wangbin3162.github.io/bin-charts/\",\"target\":\"_blank\"},{\"text\":\"bin-tree-org\",\"link\":\"https://wangbin3162.github.io/bin-tree-org/\",\"target\":\"_blank\"},{\"text\":\"动画库\",\"link\":\"\"},{\"text\":\"bin-animation\",\"link\":\"https://wangbin3162.github.io/bin-animation/\",\"target\":\"_blank\"},{\"text\":\"bin-keyframe-animation\",\"link\":\"https://wangbin3162.github.io/bin-keyframe-animation/\",\"target\":\"_blank\"}]}],\"sidebar\":{\"/docs/\":[{\"text\":\"开始\",\"items\":[{\"text\":\"介绍\",\"link\":\"/docs/introduction\"},{\"text\":\"变更日志\",\"link\":\"/docs/changelog\"}]},{\"text\":\"快速上手\",\"items\":[{\"text\":\"安装\",\"link\":\"/docs/installation\"},{\"text\":\"在 SFC 中使用\",\"link\":\"/docs/usage-sfc\"},{\"text\":\"按需引入\",\"link\":\"/docs/import-on-demand\"}]},{\"text\":\"指南\",\"items\":[{\"text\":\"JSX & TSX\",\"link\":\"/docs/jsx\"},{\"text\":\"色彩设计\",\"link\":\"/docs/color-design\"},{\"text\":\"调整主题\",\"link\":\"/docs/custom-theme\"},{\"text\":\"通用样式\",\"link\":\"/docs/common-css\"},{\"text\":\"帮助函数\",\"link\":\"/docs/common-api\"},{\"text\":\"组件指令\",\"link\":\"/docs/common-directive\"},{\"text\":\"内置动画\",\"link\":\"/docs/common-transition\"}]}],\"/components/\":[{\"text\":\"通用组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-fire\\\"></i>图标<span>Icon</span>\",\"link\":\"/components/icon\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-Youtube\\\"></i>按钮<span>Button</span>\",\"link\":\"/components/button\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-creditcard\\\"></i>卡片<span>Card</span>\",\"link\":\"/components/card\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-interation\\\"></i>折叠面板<span>Collapse</span>\",\"link\":\"/components/collapse\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-line\\\"></i>分割线<span>Divider</span>\",\"link\":\"/components/divider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-down\\\"></i>下拉菜单<span>Dropdown</span>\",\"link\":\"/components/dropdown\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-tags\\\"></i>标签<span>Tag</span>\",\"link\":\"/components/tag\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-image\\\"></i>图片<span>Image</span>\",\"link\":\"/components/image\"}]},{\"text\":\"布局组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-layout\\\"></i>布局组件<span>Layout</span>\",\"link\":\"/components/layout\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore\\\"></i>栅格<span>Grid</span>\",\"link\":\"/components/grid\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-swap\\\"></i>间距<span>Space</span>\",\"link\":\"/components/space\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-block\\\"></i>分割面板<span>Split</span>\",\"link\":\"/components/split\"}]},{\"text\":\"数据录入组件 (14)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-edit-square\\\"></i>输入框<span>Input</span>\",\"link\":\"/components/input\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-shake\\\"></i>数字输入<span>InputNumber</span>\",\"link\":\"/components/input-number\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-plus-circle\\\"></i>单选框<span>Radio</span>\",\"link\":\"/components/radio\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-check-square\\\"></i>多选框<span>Checkbox</span>\",\"link\":\"/components/checkbox\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>开关<span>Switch</span>\",\"link\":\"/components/switch\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>选择器<span>Select</span>\",\"link\":\"/components/select\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-left\\\"></i>级联选择<span>Cascader</span>\",\"link\":\"/components/cascader\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar\\\"></i>日期选择器<span>DatePicker</span>\",\"link\":\"/components/date-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-time-circle\\\"></i>时间选择器<span>TimePicker</span>\",\"link\":\"/components/time-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-bg-colors\\\"></i>颜色选择器<span>ColorPicker</span>\",\"link\":\"/components/color-picker\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-star\\\"></i>评分<span>Rate</span>\",\"link\":\"/components/rate\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>滑块<span>Slider</span>\",\"link\":\"/components/slider\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-cloud-upload\\\"></i>上传<span>Upload</span>\",\"link\":\"/components/upload\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-reconciliation\\\"></i>表单<span>Form</span>\",\"link\":\"/components/form\"}]},{\"text\":\"数据展示组件 (9)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-branches\\\"></i>树结构<span>Tree</span>\",\"link\":\"/components/tree\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-table\\\"></i>表格<span>Table</span>\",\"link\":\"/components/table\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-read\\\"></i>分页<span>Page</span>\",\"link\":\"/components/page\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-unorderedlist\\\"></i>描述<span>Desc</span>\",\"link\":\"/components/desc\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowdown\\\"></i>时间线<span>Timeline</span>\",\"link\":\"/components/timeline\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-calendar-fill\\\"></i>日历<span>Calendar</span>\",\"link\":\"/components/calendar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-appstore-fill\\\"></i>轮播<span>Carousel</span>\",\"link\":\"/components/carousel\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-orderedlist\\\"></i>数字动画<span>CountTo</span>\",\"link\":\"/components/count-to\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-caret-up\\\"></i>趋势标记<span>Trend</span>\",\"link\":\"/components/trend\"}]},{\"text\":\"导航组件 (8)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-pushpin\\\"></i>图钉<span>Affix</span>\",\"link\":\"/components/affix\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-attachment\\\"></i>锚点<span>Anchor</span>\",\"link\":\"/components/anchor\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-up\\\"></i>返回顶部<span>BackTop</span>\",\"link\":\"/components/back-top\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-right\\\"></i>面包屑<span>Breadcrumb</span>\",\"link\":\"/components/breadcrumb\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-minus\\\"></i>加载条<span>Loading Bar</span>\",\"link\":\"/components/loading-bar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>菜单<span>Menu</span>\",\"link\":\"/components/menu\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-project\\\"></i>标签页<span>Tabs</span>\",\"link\":\"/components/tabs\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-arrowright\\\"></i>步骤<span>Steps</span>\",\"link\":\"/components/steps\"}]},{\"text\":\"反馈组件 (13)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-error-fill\\\"></i>警告信息<span>Alert</span>\",\"link\":\"/components/alert\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>标记<span>Badge</span>\",\"link\":\"/components/badge\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-idcard\\\"></i>模态框<span>Modal</span>\",\"link\":\"/components/modal\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-message\\\"></i>消息提示<span>Message</span>\",\"link\":\"/components/message\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-mail\\\"></i>弹框提示<span>MessageBox</span>\",\"link\":\"/components/message-box\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-notification\\\"></i>通知<span>Notice</span>\",\"link\":\"/components/notice\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-info-circle\\\"></i>弹出提示<span>Tooltip</span>\",\"link\":\"/components/tooltip\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-question-circle\\\"></i>弹出信息<span>Popover</span>\",\"link\":\"/components/popover\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-build\\\"></i>抽屉<span>Drawer</span>\",\"link\":\"/components/drawer\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-sever-fill\\\"></i>骨架屏<span>Skeleton</span>\",\"link\":\"/components/skeleton\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-loading\\\"></i>加载<span>Loading</span>\",\"link\":\"/components/loading\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-hourglass\\\"></i>进度条<span>Progress</span>\",\"link\":\"/components/progress\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-redo\\\"></i>进度环<span>Circle</span>\",\"link\":\"/components/circle\"}]},{\"text\":\"内置组件 (4)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-border\\\"></i>空状态<span>Empty</span>\",\"link\":\"/components/empty\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-container\\\"></i>滚动组件<span>Scrollbar</span>\",\"link\":\"/components/scrollbar\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-pic-center\\\"></i>弹层<span>Popper</span>\",\"link\":\"/components/popper\"},{\"text\":\"<i class=\\\"b-iconfont b-icon-menu\\\"></i>右键菜单<span>Contextmenu</span>\",\"link\":\"/components/contextmenu\"}]},{\"text\":\"配置组件 (1)\",\"items\":[{\"text\":\"<i class=\\\"b-iconfont b-icon-setting\\\"></i>全局配置<span>ConfigProvider</span>\",\"link\":\"/components/config-provider\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wangbin3162/bin-ui-design\"}],\"footer\":{\"copyright\":\"MIT Licensed | Copyright © 2023-present bin-ui-design\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}");</script>
    
  </body>
</html>